React.lazy を使用してメイン アプリケーションからコードを分割しようとしていますが、期待どおりに動作せず、方法を理解するのに苦労しています。それをデバッグします。

私のコードはおおよそ次のとおりです。

//index.js 「react」から React をインポートします。 import { LibraryUtils } から './library/utils'; const Component = React.lazy(() => import('./component')); ... // コンポーネント.js 「react」から React をインポートします。 LibraryComponent を './library/component' からインポートします。 ...

私が欲しいのは:

• vendors.chunk.js:react
• main.chunk.js:index.js
• main-1.chunk.js：component.js
• library-0.chunk.js:library/utils
• library-1.chunk.js:ライブラリ/コンポーネント
• index.html: main.chunk.js、library-0.chunk.js、vendors.chunk.js
• 非同期チャンク: main-1.chunk.js、library-1.chunk.js

私が得たものは次のとおりです:

• vendors.chunk.js:react
• main.chunk.js：index.js コンポーネント.js
• library.chunk.js:library/utils ライブラリ/コンポーネント
• index.html: main.chunk.js、library.chunk.js、vendors.chunk.js
• 非同期ブロック: なし

その結果、最初のページの読み込みではすべての JS を読み込む必要があり、パフォーマンスが低下しました。

非同期チャンクを利用できるように、webpack で library を複数のチャンクに強制的に分割するにはどうすればよいですか?さらに良いことに、このような問題をデバッグするにはどうすればよいでしょうか?

私の構成はおおよそ次のとおりです。

splitChunks: { チャンク: 'すべて'、 キャッシュグループ: { 図書館： { テスト: /[\\/]ライブラリ[\\/]/, }、 }、 }