const AnimatedScore = React.lazy(() => import('../components/AnimatedScore')) const FireworksCanvas = React.lazy(() => import('../components/FireworksCanvas')) // ... 其他组件
Untuk mengoptimumkan kelajuan pembinaan, pemaju menggunakan kaedah
: map
const [ AnimatedScore, FireworksCanvas, // ... 其他组件 ] = [ 'AnimatedScore', 'FireworksCanvas', // ... 其他组件名 ].map((component) => React.lazy(() => import(`../components/${component}`)))
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
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!