cari

Rumah  >  Soal Jawab  >  teks badan

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>
P粉001206492P粉001206492457 hari yang lalu434

membalas semua(1)saya akan balas

  • P粉795311321

    P粉7953113212023-08-30 14:02:04

    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).

    balas
    0
  • Batalbalas