React.lazyを使ったWebpackコード分割のデバッグ方法

Question

<p><code>React.lazy</code> を使用してメイン アプリケーションからコードを分割しようとしていますが、期待どおりに動作せず、方法を理解するのに苦労しています。それをデバッグします。 </p> <p>私のコードはおおよそ次のとおりです。</p> <pre class="brush:php;toolbar:false;">//index.js 「react」から React をインポートします。 import { LibraryUtils } から './library/utils'; const Component = React.lazy(() => import('./component')); ... // コンポーネント.js 「react」から React をインポートします。 LibraryComponent を './library/component' からインポートします。 ...</pre> <p>私が欲しいのは:</p>

<li>vendors.chunk.js:react</li> <li>main.chunk.js:index.js</li> <li>main-1.chunk.js：component.js</li> <li>library-0.chunk.js:library/utils</li> <li>library-1.chunk.js:ライブラリ/コンポーネント</li> <li>index.html: main.chunk.js、library-0.chunk.js、vendors.chunk.js</li> <li>非同期チャンク: main-1.chunk.js、library-1.chunk.js</li> </ul> <p>私が得たものは次のとおりです: </p>
<li>vendors.chunk.js:react</li> <li>main.chunk.js：index.js コンポーネント.js</li> <li>library.chunk.js:library/utils ライブラリ/コンポーネント</li> <li>index.html: main.chunk.js、library.chunk.js、vendors.chunk.js</li> <li>非同期ブロック: なし</li> </ul> <p>その結果、最初のページの読み込みではすべての JS を読み込む必要があり、パフォーマンスが低下しました。 </p> <p>非同期チャンクを利用できるように、webpack で <code>library</code> を複数のチャンクに強制的に分割するにはどうすればよいですか?さらに良いことに、このような問題をデバッグするにはどうすればよいでしょうか? </p> <p>私の構成はおおよそ次のとおりです。</p> <pre class="brush:php;toolbar:false;">splitChunks: { チャンク: 'すべて'、 キャッシュグループ: { 図書館： { テスト: /[\\/]ライブラリ[\\/]/, }、 }、 }</pre></p>

Answer 1

問題は、babel-plugin-dynamic-import-node が予期せず含まれていることです。これは、動的インポート (非同期読み込み用) をノード環境内で通常の require に変換し、非同期ブロックが生成されないようにします。 。解決策は、これを削除することです (または、単体テストの実行時にのみ含めます)。