Melanggar - bukan membangun. Atau devolusi

Baru-baru ini, beberapa artikel menarik muncul di Habré. Yang pertama dikhususkan untuk masalah minifikasi ES6 , yang kedua tentang tips pengoptimalan webpack umum yang bermanfaat .

Semuanya akan baik-baik saja, tetapi mereka berdua memotong masalah pemisahan bundel menjadi ES6 dan ES5 untuk minifikasi dan tujuan pengoptimalan lainnya. Dan secara umum, sementara beberapa menulis dan menulis artikel tentang itu , yang lain (hampir semua) mengabaikan teknik ini.

Karena untuk waktu yang lama. Mahal Dan tidak terlalu.

Tapi itu perlu cepat, murah, dan bodoh. Mungkin Anda harus membalik evolusi.

Ide

Menggambarkan "ide" bukanlah ide yang baik. Lebih baik untuk menggambarkan cara kerjanya. Bagaimana proses pembentukan bundel seharusnya bekerja:

• Saya punya kode
• Saya kompilasi di bawah browser "development"
• dan semuanya bekerja.

Browser pengembangan ada di sini - sehingga async / menunggu, generator, kelas, fungsi panah dan sebagainya. Secara umum, target: esmodules dalam babel.

Saya tidak tahu tentang Anda, tetapi saya menyukai ide ini. Inilah beberapa browser lama yang masih ada di antara kita, ide ini tidak cocok dengan cara itu. (dan karena itu kita semua mendesis es5 dalam produksi, bumbu dengan setengah megabyte polyfill)

Dan itulah yang perlu diperbaiki.

Devolusi

Devolution adalah utilitas cli kecil yang membawa bundel Anda dikompilasi ke dalam target: esmodules dan menurunkannya ke es5, menambahkan semua polyfile yang diperlukan di sepanjang jalan.

Singkatnya, lalu:

• semua skrip js adalah
• jalankan melalui babel dengan satu plugin aktif (fork useBuiltins: "use") yang mendefinisikan polyfiles yang diperlukan. Ini cepat, karena tidak ada transformasi.
• untuk setiap file, semua polifil yang dibutuhkan dikumpulkan (dikurangi yang sudah ada dalam bundel utama), digabung, jalankan melalui terser dan ditambahkan ke bagian atas file.
• setiap file akan dijalankan melalui swc, versi karat dari babel yang membatalkan upgrade kode ke tingkat yang dimengerti oleh IE11. Bekerja 10-60 kali lebih cepat daripada babel. Ini tidak mendukung berbagai plugin, tetapi ini tidak perlu - semua yang diperlukan sudah diterapkan.
• terser sekali lagi ditumpangkan pada hasil, tetapi dengan mangle dimatikan (kompresi nama), yang sekali lagi cepat.
• Semua ini dilakukan pada para pekerja.

Saya menjalankan kode pada tiga proyek dengan tingkat kesulitan yang berbeda:

• proyek 1, 60 file js final (pemecahan kode). Bangun waktu 400-an. 30-an devolusi.
• proyek 2, 1 file js final (30mb). Membangun waktu 120-an. 10 devolusi.
• proyek 3, 1 file js final (2mb). Waktu pembuatan 20-an. Devolution 5s (pada awal pekerja banyak hal hilang).

Bonus dari bundel ESM agak aneh:

• satu proyek kehilangan 400kb babel / polyfill. Tidak ada "over" chip browser yang digunakan di sana basi, dan dalam "esm" mereka tidak perlu dipoles
• satu proyek kehilangan 10% karena kode generator yang jauh lebih ringkas, async / menunggu dan kelas konstruktor
• Satu proyek telah menjadi lebih gemuk, karena transformasi "longgar" kadang-kadang membuat kode lebih kompak. Tetapi mode longgar adalah opsi yang sedikit berbahaya, sedangkan kode "ES6" adalah "aman".

Sekali lagi:

• kita mengambil kode ES6 (lebih tepatnya esmodule, biarkan / const akan diganti dengan var untuk keperluan kecepatan)
• buatlah itu ES5
• melempar pada sisi polyphiles
• tersebar di ayah, tambahkan symlink ke file lain
• kami mengubah koneksi skrip ke halaman menjadi sedikit lebih pintar (modul IE11 / nomodules tidak mengerti)
• selesai - ESM untuk 85% meter khusus, ES5 untuk mereka yang ada di tangki.

Sederhana Cepat Bodoh sekali. Kami membatalkan pemutakhiran bundel. Browser lama! Sudah dilayani

Yah, browser baru akan menerima bundel dengan hampir tanpa polyfill, tanpa transformasi generator dan async / menunggu yang mengerikan, dengan fungsi panah tanpa rebana (dan mereka umumnya lebih cepat). Secara umum, semua orang senang, sepertinya ini awalnya dimaksudkan.

github.com/thekashey/devolution

PS: Sebenarnya, pada saat ini, devolusi tidak menggunakan swc , karena kadang-kadang membuat kode tidak bekerja - github.com/swc-project/swc/issues/280 , Babel tidak jauh lebih lambat - di mana swc dikoreksi dalam 20 detik, babel dapat melakukannya dalam satu menit. Dengan waktu build “normal” - mulai 5 dan seterusnya - ini merupakan nilai tambah yang besar

PS: Kalau tiba-tiba menjadi menarik mengapa devolusi - videonya ada di sini .