一般情况下,直接require第三方库,比如jquery,然后webpack会自动把第三方库打包进bundle.js里面去,这样就造成了三个问题:
- bundle.js的文件会非常大。
- 每次更新bundle.js的时候根本没有更新第三方库,但是用户仍然要下载包含所有第三方库的bundle.js,不利于缓存。
- 更新第三方库的时候很麻烦,又要重新下bundle.js。(虽然这种情况很少)
这里暂且提出一个解决方案
在webpack.prod.conf.js中写入如下代码:
let checksArray = { //例如: 'element-ui': ['element-ui'], } let plugsArray = [] Object.keys(checksArray).forEach((key1, index1) => { let modules = [] Object.keys(checksArray).forEach((key2, index2) => { if (index1 <= index2) { modules = modules.concat(Array.isArray(checksArray[key2])?checksArray[key2]:[checksArray[key2]]) } }) let minChunks = (function (modules) { return function (module) { let result = false modules.forEach((name)=>{ result = result || module.resource.toLowerCase().indexOf(name) !== -1 }) return ( module.resource && /.js$/.test(module.resource) && module.resource.indexOf( path.join(__dirname, '../node_modules'), ) === 0 && result ) } }(modules)) let plugs = new webpack.optimize.CommonsChunkPlugin({ name: key1, minChunks, }) plugsArray.push(plugs) }) const webpackConfig = merge(baseWebpackConfig, { plugins: [ ...plugsArray, ], })
即可对代码的包进行分割。