Kaedah penyahpepijatan untuk pemisahan kod webpack menggunakan React.lazy

Question

Saya menggunakan React.lazy 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.

Kod saya kira-kira seperti berikut:

// 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[\/]/,
        },
    },
}

Answer 1

Masalahnya ialah kemasukan babel-plugin-dynamic-import-node yang tidak dijangka, yang menukar import dinamik (digunakan untuk pemuatan async) kepada keperluan biasa dalam persekitaran nod, menghalang sebarang blok async daripada dijana. Penyelesaiannya adalah untuk mengeluarkannya (atau hanya memasukkannya semasa menjalankan ujian unit).