3

Webpack 3 から 4 にアップグレードしようとしていますが、共有バンドルの閉鎖に問題があります。

私の webpack は、 と の間でshared.jsコードを共有するファイルを作成するように設定されています。特に、バンドルには、変数を含むインデックス ファイルがあります。を返すという関数だけをエクスポートします。この呼び出しは、ファイル内のさまざまな場所で発生します。a.jsb.jsshared.jsstoregetStore()storegetStorea.jsb.js

私たちのページのスクリプトのラインナップは次のようになります。

/** some html **/
<script src=""/scripts/shared.js""></script>
<script src=""/scripts/a.js""></script>
<script src=""/scripts/b.js""></script>

Webpack 3 では、(呼び出し元の)getStore()コードを初めて呼び出すと、そのインスタンスが作成され、その呼び出しから呼び出しが返されます。以降のfromの呼び出しでは、 のインスタンスを作成するのではなく、 から同じ値を返します。次に、が完了して実行された後、 を呼び出すと、インスタンス化されず、使用したのと同じインスタンスが使用されます。この場合、 は同じインスタンスで、 と.shared.jsa.jsstorestoregetStore()getStore()a.jsstoregetStore()a.jsb.jsb.jsgetStore()storea.jsstorea.jsb.js

ただし、Webpack 4 では動作が異なります。a.jsのコードを呼び出すとshared.js、コードが最初に を参照するときに、以前getStore()と同様に、 の新しいインスタンスが作成され、実行中および呼び出しstore中に同じインスタンスが返されます。ただし、がコードを最初に参照するとき、使用したのと同じインスタンスを使用するのではなく、 の新しいインスタンスを作成し、のスクリプト実行全体を通じて、を呼び出すときにその秒を参照します。この場合、 の 2 つのインスタンスがあり、それぞれがとに固有です。a.jsgetStore()b.jsshared.jsa.jsstoreb.jsstoregetStore()storea.jsb.js

この問題の原因となっている Webpack 4 の違いはわかりません。CommonChunksPluginWebpack 3の の使用から切り替え、組み込みの最適化設定を使用するようになりました。以下は、両方の構成方法です。

ウェブパック 3:

plugins: [..., new webpack.optimize.CommonsChunkPlugin({
    name: 'shared',
    filename: '[name].js',
    minChunks: 2
})]

ウェブパック 4:

optimization: {
    splitChunks: {
        cacheGroups: {
            shared: {
                name: 'shared',
                chunks: 'initial',
                minChunks: 2
            }
        }
    }
}

どちらの Webpack 構成もほぼ同じサイズのファイルを吐き出し、デバッグしてコール スタックを確認するとgetStore()、それぞれの a/b.js ファイルからの呼び出しが発生します。

Webpack 4 でオブジェクトの個別のインスタンスを取得する理由a.jsと、Webpack 3 と同じインスタンスを取得する理由についての説明はありますか? スクリプトが相互に依存している場合、それらのクロージャー/スコープは共有コードをどのように処理することになっていますか?b.jsshared.js store

4

1 に答える 1