ウェブパックの作成時間が遅い（高度なモジュールの最適化）

Question

私たちのプロジェクトをwebpackに移行しようとしていますが、現在はrequirejsに基づいています。

現在のプロジェクトステータスをwebpackで複製しようとしてから数週間後、私たちはパフォーマンス上の問題を抱えています。

ウェブパックバージョン2.3.3を使用しています。

現在、240モジュールと58チャンクがあります。

私たちの問題は、の開発モード（またはwebpack-dev-serverを使用）でwebpackを起動したときに、ファイルを変更するたびに約10秒待たなければならないということです。

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のは発火：これらは、初期ビルドの統計です

{ 
    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 
} 

}

：ここ

は、私たちのWebPACKの開発configです再構築し、この番号を取得します：

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

この問題を回避するには問題は、私のチームメイトは、バベルのプラグインを使用してのdevの環境でrequire.ensureを取り除き、回避策を見つけたフラグをしました。高度なモジュールの最適化時間をミリ秒に短縮しました。回避策を使用して、継続的なビルド時間を8秒から1.5秒に短縮しました。

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