Proses Binaan Apl Vue: Rollup vs Rolldown

Ditulis oleh Andy Li

Alat binaan adalah penting untuk pembangunan web moden, bertindak sebagai enjin yang mengubah kod mentah anda kepada sesuatu yang boleh difahami dan dilaksanakan dengan cekap oleh penyemak imbas. Tanpa alat binaan yang pantas dan boleh dipercayai, anda boleh menghadapi masa permulaan yang panjang yang mengecewakan apabila melancarkan pelayan pembangunan anda, malah perubahan kod yang mudah boleh mengambil beberapa saat yang berharga untuk dilihat dalam penyemak imbas—mengganggu aliran pembangunan dan produktiviti anda.

Dalam artikel ini, kita akan membincangkan semua perkara yang terlibat dalam proses binaan apl Vue.js (atau apl React.js), termasuk Vite, esbuild, Rollup dan up-and- alat yang akan datang yang sedang dibina oleh Evan You (pencipta Vue.js dan Vite.js) yang dipanggil Rolldown.

Pertama, mari kita mulakan dengan Vite.

Proses Pembinaan Semasa Vite

Seperti banyak rangka kerja lain, Vue.js menggunakan Vite sebagai alat binaannya.

Vite mempunyai dua mod berbeza: pembangunan dan pengeluaran. Ia dilaksanakan secara berbeza di belakang tabir.

Vite menggunakan strategi binaan berbeza untuk pembangunan berbanding persekitaran pengeluaran untuk mengoptimumkan keperluan unik mereka. Semasa pembangunan, tumpuan adalah untuk menyediakan maklum balas pantas dan penggantian modul panas pantas (HMR) untuk pengalaman pembangun yang lancar. Dalam pengeluaran, keutamaan beralih kepada menjana himpunan yang dioptimumkan dan berprestasi untuk pengguna akhir.

Mari kita terokai cara Vite mengendalikan pembinaan pembangunan, di mana pendekatan inovatifnya benar-benar bersinar.

Vite dalam Mod Pembangunan

Dalam mod pembangunan, kelajuan binaan adalah penting. Daripada menghimpunkan kod selepas setiap perubahan, Vite menyajikan fail yang diubah suai secara terus dalam format ESM (seperti kod komponen Vue), membolehkan kemas kini penyemak imbas pantas dengan pemprosesan yang minimum.

Dalam amalan, Vite menukar kod TypeScript kepada JavaScript yang serasi dengan penyemak imbas. Walaupun binaan pembangunan memerlukan lebih sedikit langkah daripada pengeluaran (yang akan kami terokai sebentar lagi), penukaran kod dengan cepat masih diperlukan—terutamanya kerana perubahan perlu dipaparkan dalam penyemak imbas dalam beberapa saat.

Itulah sebabnya Vite menggunakan esbuild, alat berprestasi tinggi yang ditulis dalam Go. Memandangkan Go menyusun terus kepada bahasa mesin (arahan binari peringkat rendah yang boleh dilaksanakan oleh pemproses), esbuild memberikan kelajuan yang luar biasa - keperluan penting untuk persediaan pelayan pembangunan moden.

Vite dalam Mod Pengeluaran

Walaupun kelajuan binaan penting dalam pengeluaran, ia bukan keutamaan. Apabila membuat binaan pengeluaran, anda boleh menjangkakan sedikit masa menunggu tanpa mengira alat binaan anda. Tidak seperti mod pembangunan—yang hanya memproses satu fail dan kebergantungannya pada satu masa—binaan pengeluaran mesti menggabungkan semua kod dari awal, menjadikan binaan segera mustahil.

Selain itu, binaan pengeluaran selalunya memerlukan langkah tambahan. Sebagai contoh, anda mungkin perlu mentranspile kod JavaScript untuk penyemak imbas lama—sesuatu yang tidak perlu semasa pembangunan apabila anda boleh menggunakan penyemak imbas moden sahaja.

Langkah binaan pengeluaran penting lain termasuk minifikasi (mengalih keluar aksara yang tidak diperlukan daripada kod sambil mengekalkan fungsi) dan pemisahan kod (memecahkan kod kepada bahagian yang lebih kecil yang dimuatkan atas permintaan). Proses ini secara langsung memberi kesan kepada prestasi masa jalan kod.

Keutamaan untuk binaan pengeluaran ialah memastikan kod berjalan dengan cekap dalam penyemak imbas pengguna. Ini lebih diutamakan berbanding kelajuan binaan kerana binaan pengeluaran berlaku sekali-sekala, manakala pengguna mengakses tapak anda dengan kerap.

Vite memilih Rollup untuk himpunan pengeluaran kerana ekosistem pemalamnya yang kaya, yang boleh digunakan terus dengan Vite. Memandangkan seni bina pemalam Vite mencerminkan Rollup, keserasian ini membantu memupuk komuniti pemalam yang berkembang maju dan menyumbang kepada penggunaan meluas Vite.

?
Jadi untuk meringkaskan: Vite menggunakan esbuild (dioptimumkan untuk kelajuan) untuk binaan pembangunan dan Rollup (terkenal dengan pemalamnya) untuk binaan pengeluaran.

Sementara persediaan ini berfungsi dengan baik, perubahan besar akan datang: Vite akan menggantikan kedua-dua esbuild dan Rollup dengan alat baharu yang dipanggil Turun.

Sebelum meneroka Rolldown, mari kita periksa cabaran dengan persediaan semasa Vite yang membawa kepada ciptaan Rolldown.

Masalah dengan Vite

Apabila alat binaan atau pengikat memproses kod sumber anda, ia mula-mula mencipta pepohon sintaks abstrak (AST) - struktur data seperti pepohon yang mewakili sintaks dan struktur kod anda. Contohnya, pengisytiharan fungsi akan menjadi nod "FunctionDeclaration" dalam AST, dengan nod anak untuk parameter dan kandungannya.

Menggunakan dua alatan berbeza untuk menghuraikan kod sumber yang sama adalah tidak cekap untuk transformasi kod, kerana satu alat (atau set alat yang serasi) boleh menggunakan semula hasil yang dihuraikan sepanjang proses.

Walaupun esbuild mengendalikan mod pembangunan Vite, ia juga memainkan peranan dalam mod pengeluaran melalui minifikasi. Ini bermakna esbuild dan Rollup beroperasi secara berurutan dalam proses binaan. Untuk aplikasi React, proses menjadi lebih kompleks dengan penambahan SWC (alat binaan lain yang ditulis dalam Rust) bersama esbuild dan Rollup.

Menggunakan berbilang alatan dalam turutan mewujudkan ketidakcekapan, kerana setiap alat mesti menghuraikan kod secara bebas dan menghantar hasil antaranya. Walaupun ekosistem pemalam Rollup yang teguh menjadikannya berharga untuk binaan pengeluaran, kelajuannya yang lebih perlahan berbanding dengan esbuild memberikan pertukaran. Penyelesaian yang ideal ialah alat yang menggabungkan prestasi esbuild dengan kebolehlanjutan Rollup—dan inilah yang ingin dicapai oleh Rolldown.

Pengenalan kepada Rolldown

Rolldown ialah berkas yang ditulis dalam Rust—bahasa pengaturcaraan yang, seperti Go, menyusun terus kepada kod mesin. Ini bermakna Rolldown akan mencapai kelajuan yang serupa dengan esbuild.

Memandangkan Rolldown berkongsi API pemalam yang serupa dengan Rollup, kebanyakan pemalam serasi Vite sedia ada akan berfungsi dengan lancar dengan versi Vite yang dikuasakan Rolldown baharu.

Pada dasarnya, anda akan dapat menggunakan Vite dengan cara yang sama seperti yang anda lakukan sekarang, hanya dengan prestasi yang dipertingkatkan.

Jadi, sejauh manakah lebih pantas kita bercakap? Jika kelajuan adalah titik jualan utama, ia perlu jauh lebih pantas untuk membenarkan penggunaan alat baharu, bukan?

Menurut penanda aras oleh Evan You, semasa menguji kelajuan penggabungan kod sumber teras Vue, persediaan binaan Rolldown berprestasi lebih 7x lebih pantas daripada persediaan berasaskan Rollup.

Tanda aras ini secara khusus mengukur masa binaan pengeluaran. Bagaimana dengan pembangunan?

Pada masa ini, Vite menggunakan esbuild untuk pembangunan. Menurut penanda aras Evan You, Rolldown berprestasi hampir dua kali lebih pantas daripada esbuild. Peningkatan ini lebih sederhana daripada perbandingan Rollup kerana esbuild sudah berprestasi tinggi.

Semua peningkatan prestasi ini dikuasakan oleh set alat asas dalam Rolldown. Ini termasuk penghurai baharu, linter, penyelesai, pengubah dan banyak lagi—semua sebahagian daripada projek Oxc (dicipta oleh pasukan Rolldown).

Oxc ialah satu set alatan bahasa JavaScript. Walaupun alat ini digunakan dalam Rolldown, ia juga boleh digunakan secara individu dalam konteks bukan Rolldown. Contohnya, linter Oxc lebih pantas daripada ESLint, jadi ia boleh digunakan dalam aliran kerja CI anda untuk menangkap ralat kod dengan cepat sebelum menjalankan ESLint.

Alat Oxc biasanya lebih pantas daripada alatan lain yang serupa kerana ia ditulis dari awal dengan prestasi sebagai matlamat utamanya.

Masa Depan Vite

Walaupun Rolldown belum lagi tersedia untuk pengeluaran, keluaran alfa Vite yang menampilkan integrasi Rolldown dijangka sebelum penghujung tahun 2024. Kami akan terus melaporkan perkembangan terkini dalam Vue, Vite dan Rolldown dalam beberapa bulan akan datang.

Jika anda ingin mengetahui lebih lanjut tentang Vite, lihat kursus Lightning Fast Builds di sini pada Vue Mastery, yang diajar oleh pencipta Vite Evan You sendiri.

Asalnya diterbitkan di https://www.vuemastery.com pada 4 Disember 2024.

Atas ialah kandungan terperinci Proses Binaan Apl Vue: Rollup vs Rolldown. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!