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