項目是多入口（多頁面），每次修改代碼，熱加載都很慢，定格在 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
提交
取消