0

ドキュメントに従って、Webpackで動的インポートを使用しています: https://webpack.js.org/guides/code-splitting/#dynamic-imports

非常に基本的な例 (実際のコードではありません):

// main.js

import('./moduleA).then((moduleA) => {
  moduleA.init();
});
import('./moduleB).then((moduleB) => {
  moduleB.init();
});

// moduleA.js

import utility from './utility';
export function init() {...}

// moduleB.js

import utility from './utility';
export function init() {...}

問題は、ユーティリティモジュールが moduleA と moduleB の両方のチャンクに含まれているため、重複していることです。標準インポートの場合のように、これらのタイプの依存関係を個別の共通チャンクに分割するよう Webpack を取得する方法が見つかりません。SplitChunksPlugin は、動的にインポートされるため、moduleAとmoduleBの間の共通の依存関係をバンドルしていないようです。何かアイデアはありますか？

4

1 に答える 1

0

わかりました、ドキュメントの数行を見逃していました - または単に誤解していました。Webpack は、これらの共通の依存関係を実際に独自のチャンクに分割する必要があるかどうかを判断できるほどスマートです。共通の依存関係が特定のファイル サイズを超える場合は分割されます。ファイルが十分に小さい場合、Webpack はそれを各モジュールにバンドルする方がパフォーマンスが高いと判断します。これが基づいている他の条件もあるので、この立場にいる場合はドキュメントを見てください。

于 2019-01-08T16:08:59.440 に答える