精华 webpack之CommonsChunkPlugin正确打开方式
发布于 1 个月前 作者 soullcm 808 次浏览 来自 分享

CommonsChunkPlugin正确打开方式

说来惭愧,用了这么久的webpack,从最开始的一通全部打包进一个文件

module.exports = {
	entry: './app.js'
}

发现这样无法利用缓存,只要一修改代码,hash肯定会变,客户端缓存的文件就没意义了,就得全部reload。

于是再次查阅webpack,找到了CommonsChunkPlugin的插件,这下好了,可以把公共第三方模块提出来了,于是变成了

module.exports = {
	entry: {
		app: './app.js',
		vendor: ['react', 'react-dom', 'moment' /*等等其他的模块*/]
	},
	//其他配置
	plugins: [
		new webpack.optimize.CommonsChunkPlugin({
            name: 'vendor'
        })
	]
}

打包后会多出一个vendor.[chunkHash].js的文件,大致查看内容,不错,已经把第三方库给分离开了,也就再没往下细看了,在index.html中引入进去,觉得也就万事大吉了。

但最近自己做vue-cnode-mobile无意中刚发现,vendor的hash在每次不管修改哪个文件后重新打包其实都在变化的,泪奔,原来当初把vendor搞出来,只是提出了公共模块,但只要一发布版本,hash肯定变了,对缓存没有半毛钱的作用啊,才发现这个问题,真是惭愧啊

修改之前打包

随意修改入口文件任意地方

修改代码

再次打包

修改后打包

可以看出,再次打包后的vendor文件hash值改变了,为了解决这个问题,再次查阅webpack,在webpack2的文档中,翻到了解决方法,主要是为了学习webpack2,顺便翻到了

module.exports = {
	entry: {
		app: './app.js',
		vendor: ['react', 'react-dom', 'moment' /*等等其他的模块*/]
	},
	//其他配置
	plugins: [
		new webpack.optimize.CommonsChunkPlugin({
            names: ['vendor', 'manifest']
        })
	]
}

打包后,会多出个mainfest文件,但我们需要的vendor的hash值没有改变,这样才是我要的正确打开方式嘛,对缓存有需求的同学可以照此方法试下

12 回复

多出的mainfest文件是什么

哈哈,这个问题也是困扰我啊,我之前也是想,要是 vendor 的 hash 都变了。做这个 vendor 的意义好像就少了一点。 这个解决办法之后我试试

The issue here is that on every build, webpack generates some webpack runtime code, which helps webpack do it’s job. When there is a single bundle, the runtime code resides in it. But when multiple bundles are generated, the runtime code is extracted into the common module, here the vendor file.

webpack每次build的时候都会生成一些运行时代码。当只有一个文件时,运行时代码直接塞到这个文件中。当有多个文件时,运行时代码会被提取到公共文件中,也就是楼主的vendor

@Hi-Rube 多出的mainfest,感觉应该是服务器run时的一些code,直接影响到hash值,用mainfest单独抽出来了,这样vendor的hash就不会变了,就可以将vendor缓存掉了,mainfest的hash虽然每次在变,但很小,比起vendor,要好得多

vue-cnode-mobile

@alsotang 恩恩,我也是在尝试,vendor的hash确实没有变

vue-cnode-mobile

@wengqianshan 接着把下面一句翻译了 To prevent this, we need extract out the runtime into a separate manifest file. Even though we are creating another bundle, the overhead is offset by the long term caching benefits that we obtain on the vendor file. 为了阻止这种情况,我们需要将运行环境提取到一个单独的manifest文件里。及时我们创建了另一个bundle,但从长远来看,这种消耗比单独放在一个vendor中获得的收益要大

webpack 1 不知道行不行 晚些试验下

为什么我觉得dll更好勒 From Noder

@soliury ddl这个看着也不错,到时候试下,貌似能提高打包效率

vue-cnode-mobile

这里面讨论了这个奇葩问题: https://github.com/webpack/webpack/issues/1315webpack-md5-hash 可以临时解决这个问题

回到顶部