为了账号安全,请及时绑定邮箱和手机立即绑定

webpack多入口热加载很慢

webpack多入口热加载很慢

MYYA 2018-09-08 11:32:34
项目是多入口(多页面),每次修改代码,热加载都很慢,定格在 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模式,看下每次增量构建,都打包了哪些文件,对项目进行优化,避免不必要的打包。


查看完整回答
反对 回复 2018-09-09
  • 2 回答
  • 0 关注
  • 1094 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信