2

项目是多入口(多页面),每次修改代码,热加载都很慢,定格在 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));
}
萌小屋 149
2018-04-18 提问

查看全部 9 个回答

6

第一步:

npm i html-webpack-plugin-for-multihtml --save-dev

第二部

plugins: [
    new HtmlWebpackPlugin({
      title: 'My App',
      filename: 'assets/admin.html',
      // ...
      multihtmlCache: true // 解决多页打包的关键!
    })
  ]

推广链接