Saat ini, pendapat umum adalah bahwa kerangka kerja Javascript saat ini sangat besar, dan kerangka kerja Svelte baru sangat kompak. Oleh karena itu, semua orang perlu beralih ke sana, dan masalah ukuran Javasctipt akan diselesaikan dengan sendirinya.
Baru-baru ini ada artikel "Apakah Svelte pilihan yang baik untuk menerapkan widget?" dengan pengalaman dalam mengimplementasikan proyek dengan ukuran bundel kritis. Ini adalah alasan yang bagus untuk memeriksa janji-janji manajer PR Svelte pada proyek nyata.
Mari kita analisa!
Data awal
Proyek yang dimaksud adalah widget tertanam yang didistribusikan sebagai bundel Javascript monolitik dengan ukuran total 71 Kb (termasuk gzip). Apakah banyak atau sedikit? Artikel "Harga JavaScript pada tahun 2019" merekomendasikan menghindari bundel yang lebih besar dari 50-100 Kb. Artinya, proyek saat ini berada di zona kuning, ukurannya masih dapat diterima, tetapi sekarang saatnya untuk berpikir tentang cara menambahkan fungsionalitas baru ke dalamnya, dan pada saat yang sama masuk ke batas atas 100 Kb.
Sekarang unduh skrip ini, format dan lihat apa yang menarik di sana.
Pengaturan bundler
Hal pertama yang menarik perhatian Anda saat melihat kode adalah pengulangan pola ini:
function (t, e, n) {
t.exports = {
}
}
CommonJS . ES-, – Scope hoisting Tree-shaking. CommonJS-, .
, ES- , . webpack --display-optimization-bailout , .
" " Svelte, , .
, , , 20%, 14 .
, SVG JPG . , .
SVG. SVGO, -.
7 svg- 10 , , -, . SVGO 3 .
JPG. , 5927 , 183x72. , retina-. , . - https://squoosh.app/, . , , 7 .
, , SVGO , imagemin.
Javascript. ES6-, IE . – , ES6 7%. Internet Explorer, .
.
- axios – http-. IE , Fetch API, , 4 .
- process – process Node.js. webpack,
process.env.NODE_ENV, process process.env. 1 . - sentry – . , 17 .
- Sentry CDN. , , .
- , CDN, . , Sentry. , CDN.
Code coverage
Code Coverage Chrome Devtools. , 24% Javascript . , , , , , .
, 46 ( 2 !)
Jadi, kita melihat bahwa ukuran bundel dipengaruhi oleh banyak faktor, dan efek penggunaan Svelte, seperti halnya minum hamburger dengan diet cola, murni bersifat psikologis. Optimalisasi nyata membutuhkan perhatian pada detail dan kontrol ukuran output.
Dan jika Anda berpikir untuk beralih ke Svelte demi mengurangi ukuran proyek Anda - saya sarankan Anda memperhatikan poin-poin di atas, mungkin jika Anda memperbaikinya, maka Anda tidak perlu pergi ke mana pun.