Anda menggunakan React Lazy Import dengan cara yang salah.

Artikel ini membincangkan strategi pengoptimuman reaksi malas. Dalam projek, pemaju pada mulanya menggunakan cara berikut untuk memuatkan malas:

const AnimatedScore = React.lazy(() => import('../components/AnimatedScore'))
const FireworksCanvas = React.lazy(() => import('../components/FireworksCanvas'))
// ... 其他组件

Apabila menggunakan NPM Run Build untuk membina projek, ia mengambil masa 3.64 saat.

Untuk mengoptimumkan kelajuan pembinaan, pemaju menggunakan kaedah

: map

const [
  AnimatedScore,
  FireworksCanvas,
  // ... 其他组件
] = [
  'AnimatedScore',
  'FireworksCanvas',
  // ... 其他组件名
].map((component) => React.lazy(() => import(`../components/${component}`)))

Selepas pengubahsuaian, masa pembinaan dipendekkan kepada 926 milisaat, yang bertambah baik.

Sebab -sebab di sebalik:

Penggunaan kaedah untuk menghasilkan pemuatan malas secara dinamik) boleh membenarkan alat pembungkusan (seperti Vite) untuk mengendalikan semua kebergantungan pada satu masa. Berbanding dengan pernyataan

setiap komponen secara berasingan, kaedah map menumpukan semua komponen. Ini membolehkan alat pembungkusan untuk mengendalikan komponen ini dengan lebih berkesan dan membuat blok kod yang diperlukan. reduce import() Ringkasan: map

satu -garis kemalasan dimuatkan untuk menggunakan kaedah untuk pengenalan dinamik, dan cara utama untuk mengoptimumkan proses pembinaan termasuk:

Kurangkan operasi berlebihan semasa pembungkusan map

penciptaan yang lebih baik dan blok kod kumpulan

• Meningkatkan kecekapan penyesuaian proses penciptaan blok kod
• Mengoptimumkan penggunaan semula blok kod
Adakah anda tahu kaedah pengoptimuman beban malas ini? Selamat datang untuk berkongsi pendapat anda di kawasan komen! ?

Atas ialah kandungan terperinci Anda menggunakan React Lazy Import dengan cara yang salah.. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!