React.lazyを使ったWebpackコード分割のデバッグ方法
<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>
