3

複数のエントリと 1 つの共通チャンクを含む webpack ビルドがあります。ロードするときもあれば、ロードするときもあり、エントリ 2 と 3 をロードentry1するときentry1もentry2あります。いずれにしても、常に共通チャンクを含めます。

すべて問題ないようです。バンドルされたファイルは問題ありません。しかし、実行時に問題があるようです。2 つのエントリが必要で、両方がモジュール (共通ファイル内) に依存している場合。このモジュールは 2 回評価されます。

簡単な例:

entry1.js

require('./dep.js');

entry2.js

require('./dep.js');

deps.js

alert('called')
module.exports = 2;

ここでは、アラートが 2 回呼び出されていることがわかります。私は、webpackがrequireと同様のことをnode.js行い、キャッシュすることを期待していました。

再確認したところ、ファイルの内容deps.jsが実際にcommon.jsファイルにあり、ブレークポイントを配置するalertことで、同じコードが複数回呼び出されていることがわかりました。これは予想外です。

これを解決する方法はありますか？

4

2 に答える 2

3

これが webpack 4 の場合は、ドキュメントで提案されているように、optimization.runtimeChunk: 'single`を使用する必要があります。それ以外の場合、モジュールはドキュメントに従って毎回初期化されます。

インポートされたモジュールはランタイム チャンクごとに個別に初期化されるため、ページに複数のエントリ ポイントを含める場合は、この動作に注意してください。これを single に設定するか、ランタイム インスタンスを 1 つだけ持つことができる別の構成を使用することをお勧めします。

于 2020-06-24T14:01:58.593 に答える
1

vue cli MPA (マルチページアプリ) でも同じ問題がありました

@ Herz3h によって提供されたソリューションに加えて、各ページのチャンクのリストに「ランタイム」を追加することで解決しました

これが次のようvue.config.jsになります

module.exports = {
  pages: {
    page1: {
      entry: 'src/pages/1/main.js',
      chunks: [
        'chunk-vendors',
        'chunk-common',
        'runtime', //Make sure you add this in your chunks
        'page1',
      ]
    }
  },
  configureWebpack() {
    return {
      optimization: {
        runtimeChunk: 'single',
      },
    }
  }
}
于 2020-07-14T17:19:36.823 に答える