Rumah > hujung hadapan web > tutorial js > Membersih & mempercepatkan ekosistem JS - Perjalanan setakat ini

Membersih & mempercepatkan ekosistem JS - Perjalanan setakat ini

WBOY
Lepaskan: 2024-09-04 09:33:21
asal
1076 orang telah melayarinya

Cleaning & speeding up the JS ecosystem - Journey so far

Sejak sekian lama, saya telah bekerja keras untuk meningkatkan prestasi merentas ekosistem. Biasanya melalui pembersihan pokok pergantungan yang sudah tua, mengurangkan tapak kaki pemasangan dan meningkatkan prestasi CPU/memori bagi kebergantungan yang biasa digunakan.

Catatan blog ini hanyalah percubaan ringkas saya untuk menerangkan beberapa perjalanan yang membawa kepada e18e dan pembersihan ekosistem.

Pemikiran tentang utiliti mikro

Utiliti mikro ialah penyumbang utama kepada saiz pemasangan dan, lebih-lebih lagi, kerumitan pokok pergantungan bagi banyak projek.

Pakej seperti is-number dan is-nan sesuai dengan kategori ini.

Yang penting, kebanyakan pakej ini mempunyai kegunaan dalam sesetengah situasi tetapi pastinya bukan dalam kes penggunaan biasa.

Biasanya ia boleh diganti dalam situasi ini:

  • Ia ditulis pada masa ketika fungsi asli yang setara tidak wujud, tetapi kini wujud
  • Mereka melakukan lebih daripada apa yang pengguna perlukan

Contoh: ialah-nombor

Sebagai contoh, is-number menentukan sama ada nilai ialah nombor atau rentetan seperti nombor yang bukan NaN atau +/-Infiniti.

Dalam sesetengah projek, ini adalah bahagian berulang pengesahan yang mungkin lebih baik diekstrak ke dalam modul atau pakejnya sendiri.

Walau bagaimanapun, dalam kes biasa, ramai pengguna tidak memerlukan pengesahan NaN dan Infiniti, malah untuk menyokong rentetan seperti nombor.

Ini membuka beberapa kemungkinan penambahbaikan dalam pelbagai projek. Kami boleh menggantikan penggunaan pakej ini dalam projek tersebut dengan logik sebaris yang lebih mudah (cth. dalam banyak projek dunia sebenar, kami selamat beralih kepada typeof n === 'nombor' kerana projek tersebut kemudiannya diandaikan dan bergantung pada nilai sebagai nilai sebenar nombor pula).

Contoh lain: is-regexp

Anda boleh menguji bahawa sesuatu ialah ungkapan biasa menggunakan instanceof: v instanceof RegExp.

Walau bagaimanapun, dalam sesetengah situasi (mis. menggunakan konteks maya), ini tidak akan berfungsi kerana RegExp bukan kelas yang sama yang v berasal. Dalam kes tersebut, kita perlu menggunakan sesuatu seperti ini:

Object.prototype.toString.call(obj) === '[object RegExp]'
Salin selepas log masuk

Jika anda tidak mahu menyelaraskan kod tersebut dan perlu menyokong konteks maya atau yang serupa, mungkin perpustakaan masuk akal.

Walau bagaimanapun, dalam banyak kes, projek tidak menyokong konteks maya (dan tidak mahu). Itu membuka peluang kepada kami untuk memudahkan lagi kepada contoh mudah.

Menyokong masa jalan yang lebih lama

Satu lagi bidang potensi penambahbaikan ialah sokongan masa jalan yang lebih lama.

Agak banyak pakej yang sangat popular mempunyai pokok pergantungan yang sangat mendalam bagi pelbagai modul seperti polyfill. Ini biasanya wujud atas satu atau kedua-dua sebab berikut:

  • Untuk melindungi daripada gangguan ruang nama global
  • Untuk mengekalkan sokongan dalam masa jalan yang tidak mempunyai fungsi ini

Ramai di antara kita tidak memerlukan tahap keserasian ke belakang ini dan boleh memperoleh keuntungan prestasi yang besar jika kita boleh mengurangkannya.

Adalah penting untuk diperhatikan, sudah tentu, masih ada orang yang melakukan perlu bekerja dalam kekangan tersebut. Itulah sebabnya di kawasan ini, kami sering menyediakan garpu atau alternatif daripada cuba menukar pakej sedia ada (yang tidak akan terbuka kepada perubahan sedemikian).

Bermula untuk memperbaiki keadaan

Saya mula memikirkan kawasan tertentu ini pada tahun 2018 atau lebih, selepas melihat betapa besar dan mendalamnya node_modules saya untuk projek terkecil sekalipun.

Beberapa percubaan pertama saya untuk menukar ialah mencipta sejenis pemalam ESLint yang boleh mengesan pakej ini dan mencadangkan ia dialih keluar. Setiap beberapa bulan, saya akan mempunyai idea yang sama dan mencuba lagi tetapi tidak pernah sampai ke tempat yang saya inginkan.

Sepanjang masa ini, saya sekurang-kurangnya menyumbang kepada pelbagai projek besar untuk membersihkan dan menambah baik apa yang saya boleh (cth. yang saya telah sumbangkan untuk masa yang lama ialah buku cerita).

Pembersihan ekosistem

Saya kemudian mencipta pembersihan ekosistem, repositori untuk meningkatkan kemungkinan peningkatan prestasi merentas ekosistem (pada asasnya penjejak isu). Sekali lagi, ini pada asasnya saya dan penjejak isu peribadi saya sendiri untuk beberapa lama, tetapi sekurang-kurangnya ia boleh dilihat secara terbuka.

Tidak lama selepas itu, saya mula melihat orang ramai muncul dalam isu dan menyumbang kepada projek huluan. Saya sangat gembira melihat ini kerana saya telah menghabiskan masa bertahun-tahun untuk menyelesaikan perkara ini sendirian, dan tertanya-tanya sama ada saya membuat perubahan. Untuk melihat orang lain turut serta sangat membantu dalam mengetahui orang lain mengambil berat.

Penggantian modul

Walaupun projek pembersihan itu telah dan masih sangat berguna, kami sebenarnya tidak mempunyai tempat untuk berkongsi dengan seluruh komuniti tentang alternatif yang baik yang wujud.

Untuk menyelesaikannya, saya mencipta projek penggantian modul.

Projek ini pada asasnya memegang beberapa senarai JSON modul yang mungkin boleh diganti dan alternatif yang dicadangkan. Ini kini dibahagikan kepada tiga tahap "ketegasan" atau "berpendapat": asli (modul yang boleh digantikan dengan fungsi asli), utiliti mikro (modul yang mungkin boleh digantikan dengan kod sebaris ringkas), dan pilihan (modul yang kami fikirkan. harus diganti dengan alternatif yang lebih berprestasi).

Codemods

Langkah seterusnya projek penggantian adalah untuk mencipta satu set codemod supaya kami boleh mengautomasikan penggantian beberapa modul ini.

Didorong oleh @passle, projek ini dengan cepat menerima sejumlah besar sumbangan dalam bentuk pelbagai codemod.

Pasukan codemod juga telah melakukan beberapa kerja yang baik untuk memindahkan ini ke platform codemod. Pada masa hadapan, kami juga mahu menyediakannya melalui beberapa jenis peraturan CLI atau auto fix.

e18e

Titik perubahan di mana saya rasa kita semua yang mengambil berat tentang perkara ini bertemu antara satu sama lain ialah e18e.

Bjorn sedang melakukan beberapa kerja hebat untuk meningkatkan prestasi astro, dan Marvin juga menulis tentang mempercepatkan ekosistem. Akhirnya, laluan kami bertemu dan kami mengadakan beberapa perbincangan yang hebat di sebelah.

Sekumpulan kecil kami bekerjasama untuk melihat sama ada kami semua berada di halaman yang sama dan jika ada komuniti yang perlu dibina daripada ini. Kemudian datang e18e!

Dibina untuk menjadi ruang komuniti untuk orang ramai bekerjasama dalam meningkatkan prestasi ekosistem, ini telah menunjukkan kepada kami betapa ramai orang mengambil berat tentang perkara ini. Ramai yang telah menyertai dan telah menyumbangkan jumlah yang besar. Kami melihat peningkatan kelajuan dan pengurangan saiz hampir setiap hari di seluruh ekosistem.

Sedikit terima kasih

Komuniti berkembang pesat dan mempunyai terlalu ramai orang untuk berterima kasih atas sumbangan tersebut. Walau bagaimanapun, saya ingin mengucapkan terima kasih kepada mereka khususnya kerana membantu mewujudkan komuniti ini:

  • @patak
  • @antfu7
  • @bluwyoo
  • @passle_

Begitu juga, mereka yang telah pun mengusahakan projek yang menyumbang kepada matlamat yang sama secara selari:

  • @asleMammadam melalui tinylibs
  • pi0 melalui unjs

Atas ialah kandungan terperinci Membersih & mempercepatkan ekosistem JS - Perjalanan setakat ini. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:dev.to
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan