webpack 区分打包类库的优点

来源：1-1 课程导学

小辫子的八阿哥

2019-11-11

在 《Vue+Webpack打造todo应用》 基础课中，4-2 webpack 区分打包类库代码及 hash 优化这一小节中：

new webpack.optimize.CommonsChunkPlugin({
   name: 'runtime'
 })

在视频 5: 23 左右，老师在课程中讲这段代码的好处是：
在有新的模块加入时，webpack 会给每个模块加个 id 上去，当有新的模块加入时，它插入的顺序可能是在中间，导致后续所有模块 id 都发生变化，从而导致打包出来的内容的 hash 会产生变化，这样浏览器带来长缓存的作用就没有了。

我的问题是： 这和浏览器长缓存有什么关系？
我的理由：

因为在我们实际生产环境访问页面时，代码已经打包好了，访问的时候 hash 值已经全部都固定了，如果浏览器访问过一次，一些文件就已经被缓存了。这些文件的 hash 值不可能中途发生变化，所以浏览器缓存和这个没关系（除非在用户访问过程中强行将新打包的文件进行替换，这种方式应该不会被使用吧）
看了打包出来的 runtime.js ，总共才 101 行代码，3.84kb，把它分离出来反而造成了多一个 http 请求，所以为什么我们要把它分离出来呢？

写回答

1回答