webpack多入口熱加載很慢

項目是多入口（多頁面），每次修改代碼，熱加載都很慢，定格在 94% asset optimization持續(xù)5秒左右，頁面才更新內(nèi)容。這個應該是webpack存在的問題。
我發(fā)現(xiàn)減少頁面數(shù)量，熱加載會明顯相應的減少耗時。我懷疑每次修改內(nèi)容會對全部代碼進行某些檢查或處理，從而增加了熱加載完成的時間，但是找了很多資料還是沒找到真正原因。
這是依賴版本號：

"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));
}

回答

編輯回答

墻頭草

webpack不適合做多頁面項目；gulp會比較快;

2017年2月4日 08:42

編輯回答

朽鹿

其實更多的原因還是由于項目依賴過多導致的，尤其是第三方依賴。

減少頁面數(shù)量，相當于很大程度的減少了入口數(shù)量，也就是依賴的數(shù)量，所以會有明顯的性能提升。

其實我也做過類似的處理，建議在熱加載過程中，也加入dll plugin,提前將各種第三方依賴進行打包，能夠明顯的提升構建速度。

同時，你可以試用webpack watch模式，看下每次增量構建，都打包了哪些文件，對項目進行優(yōu)化，避免不必要的打包。

2017年5月25日 01:52

編輯回答

孤星

可以加一些本地開發(fā)的配置文件，如果是本地開發(fā)，不要讀所有文件，直接走配置的白名單去生成 html

2018年2月17日 10:14

編輯回答

念舊

在你開發(fā)首頁的時候，其他不需要的頁面可以不用載入，這樣會快很多

var only = ['home', 'user'] // 只加載首頁和用戶模塊
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;
    }
    // 優(yōu)化加載速度
    if (process.env.NODE_ENV !== 'production') {
        const canLoad = only.some(v => pathname.includes(v))
        if (canLoad) {
            devWebpackConfig.plugins.push(new HtmlWebpackPlugin(conf));
        }
    }
}

可以看我之前的配置https://segmentfault.com/a/11...

2018年3月14日 22:12

編輯回答