Kaedah penyahpepijatan untuk pemisahan kod webpack menggunakan React.lazy
<p>Saya menggunakan <code>React.lazy</code> untuk mencuba dan memisahkan beberapa kod daripada apl utama saya tetapi ia tidak berfungsi seperti yang saya harapkan dan saya mengalami kesukaran untuk memikirkan cara untuk nyahpepijat ia. </p>
<p>Kod saya kira-kira seperti berikut:</p>
<pre class="brush:php;toolbar:false;">// index.js
import React daripada 'react';
import { LibraryUtils } daripada './library/utils';
const Component = React.lazy(() =>import('./component'));
...
// component.js
import React daripada 'react';
import LibraryComponent daripada './library/component';
...</pra>
<p>Apa yang saya mahu ialah:</p>
<ul>
<li>vendor.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:library/component</li>
<li>index.html: main.chunk.js, library-0.chunk.js, vendors.chunk.js</li>
<li>Ketulan tak segerak: main-1.chunk.js, library-1.chunk.js</li>
</ul>
<p>Apa yang saya dapat ialah:</p>
<ul>
<li>vendor.chunk.js:react</li>
<li>main.chunk.js:index.js + component.js</li>
<li>library.chunk.js:library/utils + library/component</li>
<li>index.html: main.chunk.js, library.chunk.js, vendors.chunk.js</li>
<li>Blok async: Tiada</li>
</ul>
<p>Akibatnya, pemuatan halaman awal saya memerlukan pemuatan semua JS, mengakibatkan prestasi buruk. </p>
<p>Bagaimanakah cara saya memaksa pek web untuk membahagikan <kod>perpustakaan</kod> kepada beberapa bahagian supaya saya boleh memanfaatkan ketulan tak segerak? Lebih baik lagi, bagaimana saya menyahpepijat masalah seperti ini? </p>
<p>Konfigurasi saya kira-kira seperti berikut:</p>
<pre class="brush:php;toolbar:false;">splitChunks: {
ketulan: 'semua',
cacheGroups: {
perpustakaan: {
ujian: /[\/]perpustakaan[\/]/,
},
},
}</pre></p>