webpack多页面入口导致编译很慢问题
解决方法:
先在build/webpack.dev.conf.js或者build/webpack.prod.conf.js引入CommonsChunkPlugin
const CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin");
再添加plugins中添加两个CommonsChunkPlugin,manifest和vendor,并在你的自定义页面模块引入'manifest','vendor',例如下面HtmlWebpackPlugin中的chunks: ['manifest','vendor','uptocomtest']
plugins: [
new CommonsChunkPlugin({
name: 'vendor',
minChunks: function (module, count) {
// any required modules inside node_modules are extracted to vendor
return (
module.resource &&
/\.js$/.test(module.resource) &&
module.resource.indexOf(
path.join(__dirname, '../node_modules')
) === 0
)
}
}),
new CommonsChunkPlugin({
name: 'manifest',
chunks: ['vendor'],
}),
new HtmlWebpackPlugin({
favicon:"src/assets/images/favicon.ico",
filename: 'designer/uptocomtest.html',
template: 'src/designer/uptocomtest.html',
inject: true,
multihtmlCache: true,
chunks: ['manifest','vendor','uptocomtest'],
}),
],
我如果不加这些配置编译要4分钟,加了之后只需1分30秒,如果还要优化就要把页面的共用js或者css抽取出来使用类似的方法引入