项目是多入口(多页面),每次修改代码,热加载都很慢,定格在 94% asset optimization持续5秒左右,页面才更新内容。这个应该是webpack存在的问题。我发现减少页面数量,热加载会明显相应的减少耗时。我怀疑每次修改内容会对全部代码进行某些检查或处理,从而增加了热加载完成的时间,但是找了很多资料还是没找到真正原因。这是依赖版本号:"webpack": "^3.6.0",
"webpack-bundle-analyzer": "^2.9.0",
"webpack-dev-server": "^2.9.1",
"webpack-merge": "^4.1.0"
"uglifyjs-webpack-plugin": "^1.1.1",
"optimize-css-assets-webpack-plugin": "^3.2.0",
"hard-source-webpack-plugin": "^0.6.4",
"html-webpack-plugin": "^2.30.1",
"extract-text-webpack-plugin": "^3.0.0",
"copy-webpack-plugin": "^4.0.1",相应部分代码:for (var pathname in pages) { var conf = {
filename: pathname + '.html',
template: pages[pathname],
inject: true
};
if (pathname in devWebpackConfig.entry) {
conf.chunks = ['manifest', 'vendors', pathname];
conf.hash = true;
}
devWebpackConfig.plugins.push(new HtmlWebpackPlugin(conf));
}
2 回答
繁华开满天机
TA贡献1816条经验 获得超4个赞
其实更多的原因还是由于项目依赖过多导致的,尤其是第三方依赖。
减少页面数量,相当于很大程度的减少了入口数量,也就是依赖的数量,所以会有明显的性能提升。
其实我也做过类似的处理,建议在热加载过程中,也加入dll plugin,提前将各种第三方依赖进行打包,能够明显的提升构建速度。
同时,你可以试用webpack watch模式,看下每次增量构建,都打包了哪些文件,对项目进行优化,避免不必要的打包。
添加回答
举报
0/150
提交
取消