緩慢的webpack構建時間（高級模塊優化）

Question

我們很難嘗試遷移到我們的項目，該項目基於requirejs。

經過幾個星期的努力，我們用webpack複製了我們當前的項目狀態後，我們遇到了性能問題。

我們正在使用webpack版本2.3.3。

目前我們有240個模塊和58個塊。

我們的問題是，當我們在手錶推出的WebPack模式開發（或使用的WebPack-dev的服務器），每次我們修改一個文件，我們不得不等待10秒左右吧。

這裏是我們的WebPack開發配置：

{ 
    context: path.resolve(__dirname), 

    entry: { 
     'app-std': [ 
     'main', 
     'plugins/base-component', 
     'controllers/base-controller', 
     'widgets/base-widget', 
     'usertiming' 
     ] 
    }, 

    output: { 
    path: path.resolve('./dist/js'), 
    filename: '[name].js', 
    publicPath: '/js/' 
    }, 

    resolve: { 
    modules: ['public/js', 'node_modules'], 
    alias: { 
     'uuid': path.resolve(__dirname, 'public/vendor/uuid.js/dist/uuid.core.js'), 
     'jsLogger': 'js-logger', 
     'jqueryCookie': 'js-cookie', 
     'jqueryValidation': path.resolve(__dirname, 'node_modules/jquery-validation/dist/jquery.validate.js'), 
     'jQueryXDomainRequest': 'jquery-ajax-transport-xdomainrequest', 
     'dust': 'dustjs-linkedin', 
     'dust.core': 'dustjs-linkedin', 
     'dustHelpers': 'dustjs-helpers', 
     'bootstrapSelect': 'bootstrap-select', 
     'bootstrapDropDown': path.resolve(__dirname, 'node_modules/bootstrap/js/dropdown.js') 
    } 
    }, 

module: { 

    rules: [    
     { 
      test: /\.jsx?$/, 
      loader: 'babel-loader', 
      exclude: /(node_modules)/, 
      options: { 
       presets: [['es2015', { modules: false }]/*, 'react'*/], 
       plugins: ['syntax-dynamic-import'], 
       cacheDirectory: true 
      } 
     } 
    ] 
}, 

plugins: [ 
    new webpack.DefinePlugin({ 
     'process.env': { 
      'NODE_ENV': JSON.stringify('local') 
     } 
    }), 
    new webpack.ProvidePlugin({ 
     $: 'jquery', 
     jQuery: 'jquery' 
    }), 
    new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/) 
], 

devtool: 'cheap-module-eval-source-map', 

devServer = { 
    https: true, 
    port: 7070, 
    host: '0.0.0.0', 
    headers: { 'Access-Control-Allow-Origin': '*' } 
}, 

stats: { 
    chunks: true, 
    chunkModules: true, 
    modules: true 
} 

}

這些是初步搭建了統計：

6185ms building modules 
65ms sealing 
2ms optimizing 
1ms basic module optimization 
12ms module optimization 
7906ms advanced module optimization 
1ms basic chunk optimization 
0ms chunk optimization 
1ms advanced chunk optimization 
0ms module and chunk tree optimization 
12ms module reviving 
2ms module order optimization 
3ms module id optimization 
2ms chunk reviving 
6ms chunk order optimization 
9ms chunk id optimization 
22ms hashing 
0ms module assets processing 
214ms chunk assets processing 
2ms additional chunk assets processing 
1ms recording 
0ms additional asset processing 
0ms chunk asset optimization 
2ms asset optimization 
192ms emitting 

如果我們modifiy我們的模塊之一的WebPack會觸發重建，我們得到這個數字：

38ms building modules 
38ms sealing 
1ms optimizing 
1ms basic module optimization 
1ms module optimization 
7470ms advanced module optimization 
1ms basic chunk optimization 
0ms chunk optimization 
1ms advanced chunk optimization 
0ms module and chunk tree optimization 
3ms module reviving 
0ms module order optimization 
4ms module id optimization 
3ms chunk reviving 
1ms chunk order optimization 
4ms chunk id optimization 
14ms hashing 
0ms module assets processing 
1ms chunk assets processing 
1ms additional chunk assets processing 
0ms recording 
0ms additional asset processing 
1ms chunk asset optimization 
0ms asset optimization 
1ms emitting 

在這兩種情況下，它是高級模塊優化步驟，其中大部分時間消耗。 我不明白爲什麼有一個高級優化在非生產構建，我不知道爲什麼要花這麼多時間。

我想知道是否有任何方法可以深入瞭解耗時的步驟，以及是否有可能在開發模式中禁用該優化。

謝謝！

Answer 1

一些詳細得多的挖掘後，我們結束了一個破解作弊的WebPack。 在我們的系統中，我們有幾十個異步加載的塊和一些擴展循環依賴關係，這導致了很多父類很多的塊。 因此，主要耗時的任務是執行內置的RemoveParentModulesPlugin。 由於長鏈模塊鏈中有很多父母，所以這個插件需要做額外的工作。

我們的解決方案是（只在開發模式）添加新的自定義插件，它刪除的每一個模塊的父母爲運行在本地機器上的應用程序時，我們不需要這種優化。

這是我們的自定義插件的代碼，如果有人發現它在未來有用：

function AvoidParentModulesOptimizationPlugin() {} 
AvoidParentModulesOptimizationPlugin.prototype.apply = function(compiler) { 
    compiler.plugin('compilation', function(compilation) { 
     compilation.plugin(["optimize-chunks-basic", "optimize-extracted-chunks-basic"], function(chunks) { 
      // We cheat webpack to think there are no parents to optimize 
      // so recompilation time is quite low on development mode 
      chunks.forEach(function(chunk) { 
       chunk.parents = []; 
      }); 
     }); 
    }); 
}; 

Answer 2

我們的團隊也有同樣的問題。我們已經確定，使用require.ensure會導致速度放慢，這爲套件提供了動態加載。我們已經在這裏旗

https://github.com/webpack/webpack/issues/4716

要解決此問題的問題，我的隊友發現使用巴貝爾插件，剝離require.ensure在開發環境解決方法。它將高級模塊優化時間縮短到了幾毫秒。隨着周圍的工作，我們的連續生產時間從8秒減少到1.5秒。

https://www.npmjs.com/package/babel-plugin-remove-webpack