使用webpack打包工程,通常会需要分离第三方类库和应用本身的代码,因为第三方类库更新频率不高,这样浏览器可以直接从缓存读,不需要项目每次上线再获取一次。
以react为例,正常情况下,最初是这么配置的:
1 module.exports ={2 entry: {3 app: "./src/App.js",4 vendor: ["react", "react-dom"]5 },6 output: {7 path: __dirname + "/dist",8 filename: "[name].[chunkhash:8].js",9 publicPath: "/dist/"
10 },11 ...12 plugins: [13 ...14 newwebpack.optimize.CommonsChunkPlugin({15 names: ["vendor"]16 })17 ]18 };
View Code
然后我们会发现,一旦应用代码发生变化,重新打包后app.js和vendor.js的hash值都会发生变化,具体原因大致就是由于app.js变了,webpack会生成一段runtime注入vendor.js,导致vendor.js也变了(因为两者有关联)。
解决方法目前我知道二种比较好。
第一种是利用webpack.DllPlugin,具体使用方法网上很多,配置稍微有点复杂,这里不列举了。
第二种方法是利用CommonsChunkPlugin生