前端面试题记录 -- webpack打包
在生产环境中,webpack执行的时候build.js文件太大,每次请求都会消耗很大的流量,如果修改代码,代码不会更新,浏览器记录了缓存,如果同名文件不会发起请求,走缓存;
使用readfileSync读取package.json文件中的版本号,把获取的version(版本号)加入到output出口文件build.js中,以版本号管理升级的问题,版本一升级所有的资源,都直接重新来,浪费很多不必要的流量,如果文件发生改变那么从新请求index.html内的引用也要发生改变;
以chunkhash来解决缓存后修改代码的问题,在每个文件的处理中都可以获取其数字签名,文件内容发生改变,chunkhash也发生改变,index,html中的chunkhash文件名也发生改名,产生系统升级,不走缓存;
如果更改css或者js或者第三方包,都会触发重新牺牲流量去请求新的build.js,使用webpack的插件extract-text-webpack-plugin,在插件中通过contenthash将css分离,css的更改和js的更改互不影响,只要发生改动就能绕过缓存完成升级;
如果修改js,会影响所有的js(里面的内容包括自己写的和第三方包),使用webpack插件CommonsChunkPlugin分离第三方库,把自己的js和第三方包分离,各走各的,第三方包走vendor;
改动main.js代码会导致重新生成vendor,使用manifest记录到依赖清单,每次只要改动vorder或者main都会重新生成关联清单,vendor不会被main.js所影响,main.js也不会被vendor所影响;
假如不走缓存的话,那么vendor和main的文件还是特别大,使用webpack插件uglifyjs-webpack-plugin,来压缩js,因为用了ES6,所以使用yarn下载,压缩之后js文件就小了差不多50%;
当前效果比之前好了很多,但是还不是最完美的,在没有任何缓存的情况下,用户一进来主页访问消耗的流量还是很大,此时就需要用到按需加载组件,webpack分块打包,在路由router中提供了一个功能,懒加载,不要需要改变任何路由配置,把所有独自默认一开始就加载的组件分块打包(除了全局下的),形成一个个封装的函数,在路由匹配需要渲染的时候才获取组件对象,在页面创建script标签请求回来,引入执行….
阅读更多- 「webpack工程师」 用 webpack4 打包vue前端多页面项目
- 前端项目模块化的实践2:使用 Webpack 打包基础设施代码
- 【前端知识点】webpack 打包 + es6 + react入门(一)webpack打包
- webpack打包nodejs项目(前端代码)
- Webpack前端打包工具
- Spring集成React用来开发前端----maven项目中用webpack打包react相关组件
- Webpack前端打包工具
- Webpack前端打包工具
- 前端打包利器:webpack工具
- 前端工具的使用-----webpack打包
- 详解webpack打包nodejs项目(前端代码)
- Web前端 - webpack 打包Css
- webpack 前端资源模块化管理和打包工具
- 前端打包构建工具Gulp、Rollup、Webpack、Webpack-stream
- 前端自动打包工具webpack的安装和使用
- 前端模块化实践----使用webpack打包js代码
- web前端面试题记录
- grunt,gulp,webpack前端打包工具的特性
- webpack打包工具好文记录
- webpack打包编译学习记录