Webpack DefinePluginの遅さ。代わりに？

Question

Webpack DefinePluginを使用して、異なるレンダリングモードの出力バンドルを生成します。したがって、たとえば、私たちのWebPACKの設定は、コードで

[{ 
    entry: { 
     mode1: "./input.es6", 
    }, 
    output: { 
     path: path.join(__dirname, 'dist'), 
     filename: "[name]-bundle.js", 
    }, 
    plugins: [ 
     new webpack.DefinePlugin({ 
     __RENDER_MODE__: 'mode1', 
     })) 
    ] 
    },{ 
    entry: { 
     mode2: "./input.es6", 
    }, 
    output: { 
     path: path.join(__dirname, 'dist'), 
     filename: "[name]-bundle.js", 
    }, 
    plugins: [ 
     new webpack.DefinePlugin({ 
     __RENDER_MODE__: 'mode2', 
     })) 
    ] 
    }] 

を返します。私たちは

if (__RENDER_MODE__ === 'mode1') { 
    require('jquery-ui') 
} 

if (__RENDER_MODE__ === 'mode2') { 
    require('other-lib') 
} 

を行いますこれは、私たちはより多くのレンダリングモードごとに最適化されていバンドルを生成することができます。レンダリングモードが増加するにつれ、複数のWebpackコンパイルが実行され、コンパイルプロセスが大幅に遅くなります。私はこの問題を解決するにはいくつかの考えを持っており、複数の入力を聞きたい：

1. は、1つのWebPACKのコンパイルを使用すると、コンパイルが完了した後、プラグインの代替を定義します方法はありますか？コンパイル時にDefinePluginに変数を置き換えるのではなく、一度コンパイルした後に置換を行うだけです。

2. または、エントリDefinePluginを実行する方法はありますか？各エントリには、別々のDefinePlugin設定があります。

Answer 1

あなたはDefinePluginがバンドルで実際に何があるか影響を与えることができない何という単純な理由のためのコンパイル処理にDefinePluginで何のWebPACK実行する必要があります。

あなたはあなたのコードに次のしている場合：

if (__RENDER_MODE__ === 'mode1') { 
    require('someLibrary').render(); 
} 

のWebPACKは、条件が真でないときIFは常にfalseyで見ることが十分にスマートになり、それならばsomeLibraryは、あなたのバンドルに追加されます実際に使用することができます。 minificationステップの前にDefinePluginを使用することも重要です。デッドコード（例の場合と同じ）がミニファイアによって削除されるためです。

要するに、両方のバンドルを別々にコンパイルすることを避けるために、後でDefinePluginが行うことを行う方法はありません。

2つ目の質問では、エントリごとに別々のDefinePluginを使用することはできません。なぜなら、両方のエントリに共通のモジュールがあり、競合するという単純な理由があります。これを行う唯一の方法は、既に行っているように2つの別々のビルドで行うことです。