Bagaimana cara mengurangi ukuran bundel aplikasi vue.js saya

Gunakan langkah build dengan shaking pohon

Salah satu cara paling efektif untuk mengurangi ukuran bundel adalah dengan menggunakan alat build modern yang mendukung peluncuran pohon. Peluncuran pohon adalah proses yang menghilangkan kode yang tidak digunakan dari bundel akhir. VUE's API dan banyak perpustakaan JavaScript modern dirancang agar dapat diguncang pohon ketika dibundel dengan benar. Misalnya, komponen VUE yang tidak digunakan seperti bawaan `` tidak akan dimasukkan dalam build produksi jika tidak digunakan. Template pra-persaingan selama waktu pembangunan juga menghindari pengiriman kompiler Vue ke browser, yang dapat menghemat sekitar 14 kb javascript minified dan gzip, mengurangi biaya runtime.

Mengelola dan menganalisis dependensi

Ketergantungan sering berkontribusi secara signifikan terhadap ukuran bundel. Penting untuk:

-Pilih dependensi yang menawarkan format modul ES dan ramah yang mengguncang pohon (mis., `Lodash-es` bukan` lodash`).
-Secara teratur mengaudit dependensi Anda menggunakan alat seperti `Webpack-Bundle-Analyzer` untuk mengidentifikasi paket besar atau tidak perlu.
- Hapus dependensi yang tidak digunakan menggunakan alat seperti `depcheck` atau` npm prune`.
- Ganti dependensi besar dengan alternatif yang lebih kecil dan lebih terfokus. Misalnya, mengganti perpustakaan charting berat seperti `echarts` dengan yang lebih kecil seperti chartist.js dapat secara drastis mengurangi ukuran bundel.

rute dan komponen beban malas

Pemuatan malas adalah strategi di mana kode untuk rute atau komponen hanya dimuat saat dibutuhkan, bukannya menggabungkan semuanya di muka. Vue Router mendukung rute pemuatan malas dengan mengimpor komponen secara dinamis, membagi bundel menjadi potongan -potongan kecil yang meningkatkan kinerja beban awal. Metode ini secara signifikan mengurangi ukuran bundel utama dan menyebarkan beban kode dari waktu ke waktu ketika pengguna menavigasi melalui aplikasi.

Gunakan pemisahan kode dan impor dinamis

Webpack, yang biasanya digunakan dalam proyek VUE, mendukung pemisahan kode melalui pernyataan dinamis `impor ()`. Ini berarti bagian dari aplikasi Anda dapat dibagi menjadi bundel terpisah yang dimuat secara asinkron. Memanfaatkan pemisahan kode dengan benar membantu mengelola ukuran bundel dengan memuat hanya kode yang diperlukan sesuai permintaan.

Minifikasi dan Kompresi

Minifikasi mengurangi ukuran file JavaScript dengan menghapus whitespace, komentar, dan mempersingkat nama variabel. Alat -alat seperti Uglifyjs atau Terser (sering diintegrasikan dalam proses pembuatan modern) secara otomatis meminifkan kode selama langkah pembuatan produksi. Selain itu, kompresi gzipping atau brotli lebih lanjut mengurangi ukuran aset yang disajikan kepada pengguna.

Gunakan alternatif Vue yang lebih kecil untuk kasus penggunaan tertentu

Untuk proyek -proyek di mana kerangka kerja penuh Vue.js mungkin terlalu berat, terutama untuk kasus peningkatan progresif, pertimbangkan untuk menggunakan alternatif yang lebih ringan seperti Petite Vue, yang berukuran sekitar 6 kb. Ini bermanfaat jika proyek tidak memerlukan ekosistem Vue penuh.

SCOPE DAN Impor Hanya bagian perpustakaan yang diperlukan

Banyak perpustakaan besar seperti bootstrap vue atau lodash memungkinkan mengimpor hanya komponen atau fungsi spesifik daripada seluruh perpustakaan. Misalnya, alih -alih mengimpor seluruh perpustakaan bootstrap vue, impor hanya komponen yang Anda butuhkan, yang mengurangi ukuran bundel dengan mengecualikan bagian yang tidak digunakan. Demikian pula, impor fungsi lodash secara modular (`impor peta dari 'lodash/peta' alih -alih seluruh lodash).

Hindari gaya inline dan kerangka kerja CSS besar jika tidak diperlukan

Kerangka kerja CSS seperti bootstrap menambah ukuran bundel. Evaluasi jika Anda benar -benar membutuhkan seluruh kerangka kerja dan pertimbangkan alternatif seperti CSS tailwind untuk bundel CSS yang lebih fleksibel dan lebih kecil. Juga, pertimbangkan untuk menghapus impor gaya yang tidak digunakan atau hosting CSS secara eksternal jika memungkinkan.

Rendering sisi server dan pembuatan situs statis ###

Memindahkan beberapa rendering ke server melalui SSR (rendering sisi server) atau SSG (pembuatan situs statis) mengurangi jumlah javascript yang dibutuhkan di sisi klien, secara efektif menurunkan ukuran bundel. Ini menggeser tanggung jawab rendering ke server, mengirim HTML yang telah dibangun ke klien dengan JS minimal untuk interaktivitas.

Mengoptimalkan gambar dan aset lainnya

Meskipun ini tidak secara langsung mempengaruhi ukuran bundel JavaScript, mengoptimalkan gambar, font, dan aset berkontribusi pada kinerja beban halaman secara keseluruhan, yang melengkapi peningkatan JavaScript.

Gunakan fitur javascript modern dan polyfill dengan bijak

Menggunakan sintaks JavaScript modern dapat menyebabkan bundel yang lebih kecil bila dikombinasikan dengan alat build modern. Hindari polyfill yang tidak perlu kecuali menargetkan browser yang lebih lama, dan pertimbangkan polyfill bersyarat berdasarkan kemampuan browser pengguna.

Ringkasan praktik untuk mengurangi ukuran bundel vue.js

- Gunakan alat build dengan peluncuran pohon (mis., Webpack, vite).
- Template pra-kompilasi vue.
-Menganalisis konten bundel dengan alat-alat seperti `Webpack-Bundle-Analyzer`.
- Hapus atau ganti dependensi berat.
- Impor hanya komponen atau fungsi yang diperlukan dari perpustakaan.
- Menerapkan pemuatan malas untuk rute dan komponen.
- Gunakan pemisahan kode dan impor dinamis.
- Terapkan minifikasi dan kompresi.
- Pertimbangkan alternatif yang lebih kecil seperti Petite Vue untuk aplikasi tertentu.
- Mengoptimalkan penggunaan CSS dan menghindari mengimpor seluruh kerangka kerja secara tidak perlu.
- Gunakan SSR atau SSG untuk mengurangi ukuran bundel sisi klien.
- Mengoptimalkan aset dan menggunakan fitur JavaScript modern dengan hati -hati.