请稍等 ...
×

采纳答案成功!

向帮助你的同学说点啥吧!感谢那些助人为乐的人

webpack 区分打包类库的优点

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

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

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

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

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

正在回答 回答被采纳积分+3

1回答

Jokcy 2019-11-12 21:32:07

因为你把runtime.js和别的代码打包在一起,可能会导致在业务代码没有变化的时候hash却变了,导致浏览器无法使用之前的缓存内容

0 回复 有任何疑惑可以回复我~
  • 提问者 小辫子的八阿哥 #1
    比如,我现在执行了打包命令,runtime.js 和其它代码打包在一起了,打包完生成在 dist 目录下,然后用户访问的都是 dist 目录下的代码。这个都已经打包完成了,所有的文件名打包后就固定下来了,它的文件名的 hash 值就是固定的了。为什么还会变
    回复 有任何疑惑可以回复我~ 2019-11-13 10:14:18
  • Jokcy 回复 提问者 小辫子的八阿哥 #2
    这是webpack2的时候遗留的问题,就是webpack打包对于模块的id生成会有一些随机性,就会导致这个问题,现在的webpack4其实是不会这样的
    回复 有任何疑惑可以回复我~ 2019-11-14 21:12:53
问题已解决,确定采纳
还有疑问,暂不采纳
意见反馈 帮助中心 APP下载
官方微信