webpack多入口熱加載很慢

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

"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",

相應(yīng)部分代碼：

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不適合做多頁(yè)面項(xiàng)目；gulp會(huì)比較快;

2017年2月4日 08:42

編輯回答

朽鹿

其實(shí)更多的原因還是由于項(xiàng)目依賴過(guò)多導(dǎo)致的，尤其是第三方依賴。

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

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

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

2017年5月25日 01:52

編輯回答

孤星

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

2018年2月17日 10:14

編輯回答

念舊

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

var only = ['home', 'user'] // 只加載首頁(yè)和用戶模塊
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

編輯回答