前端面试题记录 -- 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标签请求回来,引入执行….

猜你喜欢

转载自blog.csdn.net/weixin_38457248/article/details/81805549
今日推荐