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'; ... 
Apa yang saya mahu ialah:
 
 
vendor.chunk.js:react
 
main.chunk.js:index.js
 
main-1.chunk.js：component.js
 
library-0.chunk.js:library/utils
 
library-1.chunk.js:library/component
 
index.html: main.chunk.js, library-0.chunk.js, vendors.chunk.js
 
Ketulan tak segerak: main-1.chunk.js, library-1.chunk.js
 
 
Apa yang saya dapat ialah:
 
 
vendor.chunk.js:react
 
main.chunk.js:index.js + component.js
 
library.chunk.js:library/utils + library/component
 
index.html: main.chunk.js, library.chunk.js, vendors.chunk.js
 
Blok async: Tiada
 
 
Akibatnya, pemuatan halaman awal saya memerlukan pemuatan semua JS, mengakibatkan prestasi buruk. 
 
Bagaimanakah cara saya memaksa pek web untuk membahagikan perpustakaan kepada beberapa bahagian supaya saya boleh memanfaatkan ketulan tak segerak? Lebih baik lagi, bagaimana saya menyahpepijat masalah seperti ini? 
 
Konfigurasi saya kira-kira seperti berikut:
 
splitChunks: { ketulan: 'semua', cacheGroups: { perpustakaan: { ujian: /[\/]perpustakaan[\/]/, }, }, }