Hello ^_~ ;
Saya Lamine, dan saya teruja untuk berkongsi artikel teknologi pertama saya yang meneroka sorotan ViteConf 2024. Sebagai peminat teknologi yang menyelami penulisan teknikal, saya mengharapkan maklum balas dan cadangan anda untuk membantu meningkatkan kandungan masa depan saya.
Sebelum kita menyelami butiran persidangan, mari kita terokai apakah Vite dan ViteConf?
Vite ialah alat binaan hadapan generasi seterusnya yang dicipta oleh Evan You (pencipta Vue.js). Ia meningkatkan pengalaman pembangunan web dengan ketara dengan menawarkan Penggantian Modul Panas (HMR) sepantas kilat melalui pelayan pembangun menggunakan modul ES asli. Dengan konfigurasi mudahnya, Vite menggabungkan kod menggunakan Rollup dan memanfaatkan SWC (Speedy Web Compiler) untuk transformasi kod yang cekap.
ViteConf ialah acara dalam talian percuma tahunan yang menghimpunkan komuniti Vite dalam format yang menarik dan interaktif. Pakar dan peminat berkumpul untuk berkongsi pengetahuan dan mempamerkan ciri baharu. Tahun ini, (3-4 Oktober, 2024) menandakan edisi ketiga acara itu, yang menampilkan 43 bengkel dalam maraton selama 12 jam.
Merumuskan 12 jam kandungan dengan banyak butiran teknikal adalah mencabar. Tetapi saya telah cuba meringkaskannya secara maksimum tanpa meninggalkan maklumat penting. Untuk memudahkan artikel kami, saya telah menyimpan tajuk asal kebanyakan ceramah ViteConf dan menyusunnya ke dalam 8 bahagian utama:
Acara kami membawa beberapa pengumuman besar yang membuka jalan untuk masa depan Vite. Penceramah berwawasan memperkenalkan alat dan platform yang mengubah permainan dengan potensi untuk membentuk semula pembangunan web. Mari selami sorotan!
Evan You mengumumkan Void Zero, sebuah syarikat baharu yang menumpukan pada membina perkakasan JavaScript generasi seterusnya. Syarikat itu telah mengumpulkan $4.6 juta dalam pembiayaan benih, diketuai oleh Accel dan Amplify Partners, dengan penyertaan daripada pengasas berpengalaman dalam ruang alat pembangun. Void Zero berfungsi untuk merealisasikan visi Evan untuk mencipta rangkaian alat yang bersatu, berprestasi tinggi dan boleh digubah yang agnostik masa jalan untuk pembangunan JavaScript. Evan turut membincangkan perkembangan semasa di Void Zero dan berkongsi beberapa penanda aras ujian yang mengagumkan yang pasti mengagumkan.
Eric Simons pengasas bersama StackBlitz, mengumumkan Bolt.new, alat revolusioner yang bersedia untuk membentuk semula landskap pembangunan web, memanfaatkan keupayaan sedia ada teknologi WebContainer StackBlitz. Bolt.new menyediakan pembangun dengan persekitaran tindanan penuh dalam penyemak imbas yang membolehkan penciptaan projek segera, penyahpepijatan, pembetulan ralat dan penggunaan, semuanya dikuasakan oleh model bahasa besar Claude dan V0 yang terkini.
Eric menerangkan cara Bolt.new direka untuk menghapuskan masa persediaan. Dengan memasukkan gesaan mudah, pembangun boleh menjana aplikasi yang dikonfigurasikan sepenuhnya terus daripada penyemak imbas, yang benar-benar mengubah permainan. Dengan pengurusan pakej bersepadu dan pengendalian pergantungan, kuasa yang ditunjukkan dalam ceramahnya tidak dapat ditandingi. Cara terbaik untuk memahami potensinya ialah mencuba Bolt.new untuk diri sendiri.
Tidak berhenti pada pengumuman ini, Eric juga mendedahkan satu lagi kemas kini utama: Bolt.new Core kini sumber terbuka dan tersedia di github.
Selepas pengenalan Evan tentang OXC dan Rolldown serta integrasi mereka yang akan datang dengan persekitaran Vite, Boshen Chen, pencipta projek Oxc, memperkenalkan OXC, sebuah rantai alat JavaScript yang bercita-cita tinggi, berprestasi tinggi, bersepadu sepenuhnya yang ditulis dalam Rust, direka bentuk dengan ketara meningkatkan prestasi dan pengalaman pembangun. Ia terdiri daripada:
Komponen yang dirancang pada masa hadapan termasuk:
Boshen juga memperkenalkan Rolldown, pengikat masa depan untuk Vite, yang menggunakan OXC sebagai enjin terasnya. Rolldown menyediakan prestasi tinggi dan menyokong pelbagai ciri, termasuk penggoncangan pokok, pemisahan kod dan keserasian pemalam.
Langkah seterusnya melibatkan integrasi Vite yang lebih mendalam dengan OXC dan Rolldown, yang akan membawa kepada peningkatan prestasi yang ketara, pengalaman pembangun yang lebih konsisten dan keupayaan untuk mengendalikan aplikasi web yang lebih besar dan lebih kompleks.
Matias (Patak) melancarkan API Alam Sekitar, satu evolusi penting yang direka untuk meningkatkan fleksibiliti dan prestasi Vite. API ini membolehkan pembangun mentakrifkan berbilang persekitaran (contoh: klien, pelayan, edge) dalam satu projek Vite, memperkemas proses pembangunan dan penggunaan. Dia mencatatkan kemasukan rangka kerja meta seperti Nuxt, Remix dan TanStack sejak tahun pertama ViteConf.
Perkara-perkara penting daripada ceramah itu termasuk:
Tomek memperkenalkan TutorialKit, set alat sumber terbuka yang inovatif untuk mentakrifkan semula penciptaan tutorial interaktif dalam ekosistem JavaScript. Menangani batasan dokumentasi semasa, TutorialKit menyediakan pengalaman pembelajaran yang dipilih susun secara praktikal yang menyepadukan panduan pengguna dengan tunjuk cara dan latihan berstruktur.
Dikuasakan oleh WebContainers, TutorialKit dibina berdasarkan cerapan daripada rangka kerja seperti Svelte, Angular dan Nuxt. Dengan satu arahan, npm create tutorial, pembangun boleh menjana projek tutorial lengkap dengan pantas—lengkap dengan penerangan pelajaran, coretan kod dan pratonton langsung dalam masa kurang daripada seminit.
TutorialKit sangat boleh disesuaikan, menawarkan tema gelap dan terang serta terminal interaktif, membolehkan pelajar melibatkan diri sepenuhnya dengan bahan tersebut. Alat ini memperkasakan pembangun, pendidik dan komuniti untuk mencipta sumber pendidikan yang lebih menarik secara terus dalam penyemak imbas.
Mohammad memperkenalkan pkg.pr.new, alat untuk penyelenggara perpustakaan npm dan pengguna untuk melihat pratonton cawangan, pembetulan atau ciri yang belum dikeluarkan tanpa persediaan yang rumit. Dengan arahan mudah seperti:
npm i https://pkg.pr.new/${owner}/${repo}/${package}@{commit}
pembangun boleh menguji versi tertentu serta-merta, memintas kaedah yang menyusahkan seperti keluaran berterusan.
Langkah seterusnya termasuk penyepaduan dengan ESM.sh untuk sokongan CDN dan UI tersuai, memperluaskan fungsi pkg.pr.new kepada persekitaran seperti Deno dan Vue Playground.
Dalam bahagian ini, kami akan meneroka integrasi baharu yang menjadikan Vite lebih mudah disesuaikan. Daripada sokongan Angular kepada ujian yang dipertingkatkan dan aliran kerja CI, kemas kini ini mendedahkan cara Vite mengembangkan jangkauannya dan memudahkan pengalaman pembangun.
Yann Braga, penyelenggara Buku Cerita di Chromatic, melancarkan integrasi baharu yang ketara dengan Vite dan Vitest, mengubah pembangunan dan ujian komponen UI. Kemas kini ini memperkenalkan pemalam Vitest yang menukar cerita Buku Cerita kepada ujian berfungsi, dengan mudah meningkatkan liputan kod tanpa kes ujian tambahan. Keupayaan penyahpepijatan visual pemalam membolehkan pembangun memeriksa ujian yang gagal dalam masa nyata daripada persekitaran CI mereka, memupuk kerjasama pasukan yang lancar.
Dalam versi 9, Buku Cerita merancang untuk menyatukan ujian visual, kebolehcapaian dan fungsi ke dalam UI yang padu dan peralihan kepada binaan ESM sahaja untuk mengurangkan saiz pemasangan dan meningkatkan prestasi. Kemajuan ini mengukuhkan komitmen Buku Cerita kepada aliran kerja bahagian hadapan yang cekap, diperkemas dan ujian komponen yang komprehensif.
Katerina Skroumpelou, Jurutera Kanan di Nx, menyerlahkan kecekapan yang dibawa oleh Nx kepada projek Vite. Dia bermula dengan membincangkan cara Nx mengoptimumkan aliran kerja CI dan mengautomasikan tugas yang kompleks, menjadikan proses binaan lebih pantas dan lebih diperkemas.
Seterusnya, dia menunjukkan cara menggunakan Nx dengan projek React Vite. Demo itu mempamerkan cara Nx meningkatkan prestasi melalui ciri seperti caching dan penyepaduan Awan Nx. Nx Cloud membolehkan penskalaan dan main semula tugas, menawarkan pelaksanaan selari untuk meningkatkan kelajuan. Perintah "nx terjejas" juga dipaparkan, menjalankan tugas dengan bijak hanya untuk bahagian asas kod yang diubah suai, seterusnya mengoptimumkan CI.
Katerina menekankan bahawa pemalam Nx, seperti pemalam untuk ESLint dan Vite, memudahkan migrasi dan mengekalkan kod dengan lancar tanpa mengganggu struktur sedia ada. Dia mengakhiri dengan menunjukkan cara menyediakan Tindakan GitHub untuk CI, menunjukkan keupayaan Nx untuk mengagihkan tugas dengan cekap merentas ejen.
Irina Nazarova, yang mengendalikan syarikat perunding Evil Martians, berkongsi cara Vite Ruby mengubah pengalaman pembangun dalam aplikasi Rails, menawarkan alternatif yang lebih baik kepada pendekatan "No Build" Rails. Vite Ruby telah berjaya dilaksanakan di syarikat seperti Power Home Remodeling Group dan ClickFunnels, mendayakan persediaan frontend yang lebih kompleks sambil mengekalkan falsafah mesra pembangun Rails.
Zhao Jinjiang, seorang jurutera perisian di Bit dan ahli pasukan Vue.js Conf, membincangkan peralihan Bit daripada Webpack/Jest kepada Vite/Vitest. Suis ini memudahkan pembangunan dipacu komponen dengan membenarkan persekitaran pembangunan tersuai dengan ujian bersepadu, aliran kerja binaan dan ujian yang dioptimumkan serta fleksibiliti yang dipertingkatkan melalui API Node.
Dalam bahagian ini, kita akan melihat cara Vite memperkasakan rangka kerja utama seperti SolidJS, Svelte dan Remix. Perkembangan ini menunjukkan cara Vite memacu ciri baharu dan peningkatan prestasi yang disesuaikan dengan keperluan setiap rangka kerja.
Ryan Carniato, pencipta SolidJS, berkongsi cara SolidStart (mencapai versi 1.0 pada bulan Mei), berkembang untuk menyatukan pembangunan pelanggan dan pelayan. Dibina pada Vite, Vinxi dan Nitro, SolidStart memperkenalkan fungsi pelayan dan menjadi rangka kerja JavaScript pertama dengan seni bina tanpa penghala yang dipermudahkan, mencapai saiz berkas 4.7KB yang sangat ringan.
Dengan pembiayaan daripada pasukan Chrome, Ryan dan Alexis membangunkan Seroval, alat pesirilan berkuasa yang mampu mengendalikan data tak segerak dan penstriman. Ini membawa kepada kejayaan yang ketara: mutasi satu penerbangan, yang menggabungkan tindakan dan pengambilan data dengan cekap menjadi satu permintaan yang lancar. Mereka menunjukkan konsep ini dengan demo papan Trello interaktif, mempamerkan peningkatan prestasi.
Ryan juga menekankan kepentingan ekosistem Vite dalam membolehkan prototaip pantas dan menyerlahkan bagaimana ia telah mempengaruhi pembangunan Solid 2.0.
Lukas Taegert-Atkinson mempersembahkan peningkatan terbaharu dan akan datang untuk Rollup:
Pedro Cattori dan Mark Dalgleish membentangkan penambahbaikan yang datang daripada pemindahan Remix ke Vite.
Pedro memfokuskan pada pengasingan kod pelayan, menerangkan cara mereka beralih daripada bergantung pada gegar pokok untuk mengalih keluar kod pelayan daripada berkas pelanggan. Sebaliknya, mereka melaksanakan transformasi Remix eksplisit dan memperkenalkan akhiran fail .server, yang memberikan ralat masa bina yang jelas apabila kod pelayan mungkin bocor kepada klien.
Tandai penambahbaikan pengendalian CSS yang diliputi, menunjukkan cara ia berkembang daripada import CSS berasaskan URL asal Remix untuk memanfaatkan ciri terbina dalam Vite. Ini termasuk chunking CSS yang lebih baik melalui Rollup dan penyelesaian untuk mod pembangunan yang menggunakan rentetan pertanyaan URL Vite untuk import CSS, memastikan gelagat yang konsisten antara pembangunan dan pengeluaran sambil mengelakkan kilat penggayaan.
Perubahan ini membawa pengalaman pembangun yang lebih baik, pemisahan kod yang lebih mantap dan pengendalian CSS yang lebih cekap kepada rangka kerja Remix, menunjukkan cara penghijrahan Vite mendorong mereka untuk meningkatkan seni bina terasnya.
Shai Reznik membuka ceramahnya dengan perkenalan yang menyeronokkan dan suka bermain, menggambarkan dirinya sebagai "pemain pertunjukan legenda" dengan dakwaan yang mengagumkan tentang kebolehan teknikalnya.
Dalam ceramah itu, Shai memberi tumpuan kepada Qwik, rangka kerja JS yang direka untuk mengoptimumkan prestasi aplikasi dengan menghapuskan keperluan untuk penghidratan. Tidak seperti rangka kerja pemaparan sebelah pelayan tradisional yang bergantung pada penghidratan untuk menjadikan apl interaktif dengan menjalankan semula JS pada klien, Qwik menggunakan "penstriman JavaScript." Proses ini memecahkan apl kepada segmen kecil, mengekodkan struktur apl dan pendengar acara semasa pemaparan sebelah pelayan. Segmen ini kemudiannya dihantar kepada pelanggan, di mana Qwik menampan kod yang diperlukan di latar belakang. Akibatnya, apl menjadi interaktif sebaik sahaja pengguna berinteraksi dengannya, tanpa menunggu JS dimuatkan.
Shai menerangkan bahawa Qwik mengendalikan proses ini secara automatik, menghapuskan keperluan untuk pengoptimuman manual seperti import dinamik dan pemuatan malas. Ini meningkatkan pengalaman pengguna dan SEO dengan mempercepatkan masa muat. Beliau juga menyerlahkan keupayaan Qwik untuk membuat skala dengan lancar, menjadikannya sesuai untuk kedua-dua tapak pemasaran mudah dan apl yang kompleks. Shai meyakinkan penonton bahawa Qwik stabil, dengan komuniti dan ekosistem yang semakin berkembang, termasuk penyepaduan untuk pengesahan, ujian dan penggunaan.
Selain itu, Shai memperkenalkan ciri masa hadapan, seperti penimbalan ramalan, pengoptimuman dipacu AI seperti penyingkiran kod mati dan pemfaktoran semula automatik, yang bertujuan untuk memperkemas lagi proses pembangunan dan meningkatkan prestasi apl.
Johnson Chu, pencipta Volar.js, memperkenalkan rangka kerja terobosan untuk membina alatan bahasa yang menyokong bahasa terbenam merentas pelbagai persekitaran seperti Vue.js, React, Svelte dan alatan yang disepadukan dalam ekosistem Vite. Volar.js, kini diterima pakai secara meluas, menekankan kecekapan dan modulariti, menjadikannya bahagian penting dalam mengoptimumkan aliran kerja pembangunan, terutamanya dalam projek yang dibina dengan Vite.
Johnson memecahkan seni bina Volar, menyerlahkan:
Kaya daripada pasukan Svelte mengumumkan penulisan semula utama dalam Svelte 5, bertujuan untuk menangani had teras dalam sistem reaktif Svelte walaupun popular di kalangan pembangun. Dia menggariskan struktur semasa Svelte dalam empat perkara:
Chris Manson membincangkan cara Ember.js, rangka kerja bahagian hadapan berusia 13 tahun, berkembang dengan penyepaduan Vite. Sistem binaan warisan Ember, Brokoli, menimbulkan cabaran untuk pengoptimuman moden seperti pemisahan kod. Untuk membetulkannya, Embroider diperkenalkan untuk merapatkan jurang antara sistem binaan legasi Ember dan bundler moden. Ia memproses terlebih dahulu pokok Brokoli tradisional Ember menjadi struktur yang lebih bersih yang boleh dikendalikan oleh pengikat yang lebih baharu. Versi awal Embroider berfungsi dengan Webpack tetapi tidak stabil, membawa kepada kerja selanjutnya untuk menjadikannya serasi dengan Vite.
Cabaran utama ialah menyesuaikan pendekatan pertama modul Vite untuk bekerja dengan modul berasaskan AMD Ember yang lebih lama. Penyelesaian itu melibatkan reka bentuk semula proses binaan, di mana Vite memacu binaan dengan pemalam Ember, bukannya Ember CLI yang menjalankan Vite. Pemalam Embroider Vite dicipta untuk mengendalikan resolusi modul dan metadata, memastikan penyepaduan yang lebih lancar.
Hasilnya ialah sistem yang berfungsi untuk apl Ember dibina dengan Vite, dengan usaha berterusan untuk menjadikan ini pengalaman lalai untuk projek baharu.
Dalam bahagian ini, kita akan membincangkan alatan dan teknik yang mendorong prestasi Vite ke tahap yang lebih tinggi. Perbincangan mengenai Nitro v3, integrasi Rust dalam Rollup dan apl SQLite tempatan pertama mendedahkan strategi untuk membina aplikasi yang lebih pantas dan cekap.
Atila, Ketua X di CrabNebula dan penyumbang utama kepada kumpulan kerja Tauri dan pasukan SolidJS DX, memperkenalkan Taurify, SDK baharu yang direka bentuk untuk mengubah aplikasi web menjadi aplikasi desktop dan mudah alih asli menggunakan teknologi Tauri.
Lima Ciri Utama:
Demo Langsung:
Daniel Roe, ketua pasukan teras Nuxt, mempersembahkan kaedah inovatif untuk mengoptimumkan prestasi fon web menggunakan Vite dan Nuxt. Beliau menjelaskan cabaran fon web, seperti anjakan reka letak dan isu prestasi. Roe memperkenalkan 3 alatan:
Daniel turut menyerlahkan kekuatan Vite, terutamanya sifat polimorfiknya yang membolehkan kerjasama yang lancar antara rangka kerja seperti Nuxt dan pasukan Vite.
Brandon Roberts, pencipta AnalogJS dan penyelenggara NgRx, memperkenalkan AnalogJS, rangka kerja meta untuk Angular yang dibina pada Vite. Beliau mengumumkan keluaran AnalogJS V1.8, yang bertujuan untuk meningkatkan ekosistem Angular dengan alatan seperti Vite, Nitro dan Nx untuk penyelesaian timbunan penuh. Analog memanfaatkan ciri Sudut moden seperti komponen kendiri dan pemaparan sisi pelayan (SSR) yang dipertingkatkan, menawarkan penghalaan berasaskan fail, penjanaan tapak statik dan laluan API bersepadu.
Ciri & Penyepaduan Utama:
• SSR & Penjanaan Statik: Sokongan untuk pelbagai platform (Nod, Edge, Vercel, dll.).
• Laluan API: Tentukan titik akhir pelayan dengan mudah bersama komponen.
• Alat Pengujian: Integrasi dengan Vitest dan Penulis Drama, menjajarkan Sudut dengan amalan ujian moden.
• Buku Cerita & Lagi: Penyepaduan kuasa Vite dengan perpustakaan komponen seperti Buku Cerita.
Roberts turut mengusik ciri percubaan, termasuk Komponen Fail Tunggal Analog (SFC) dan tindakan bentuk, bertujuan untuk memudahkan pengendalian data pelayan pelanggan.
Bjorn Lu membuka dengan humor, bergurau tentang "mitos prestasi" sebelum menyelami strategi untuk meningkatkan prestasi aplikasi web. Mereka menyerlahkan tiga aspek utama:
Igor, seorang jurutera perisian di Cloudflare dan bekas penyumbang kepada Angular, membincangkan konsep "polylith web" sebagai alternatif kepada aplikasi web monolitik tradisional (aplikasi polilitik terdiri daripada banyak komponen, berfungsi secara bebas untuk meningkatkan fleksibiliti dan keteguhan). Beliau menekankan faedah aplikasi polilitik, yang terdiri daripada berbilang komponen bebas yang boleh beroperasi dalam konteks berbeza, membezakannya dengan aplikasi monolitik yang biasanya mempunyai titik kemasukan tunggal dan boleh membawa kepada isu prestasi, ketidakcekapan dan risiko keselamatan.
Perkara utama termasuk:
• Keadaan Aplikasi Monolitik Semasa: Banyak aplikasi hari ini, seperti SPA dan aplikasi Node.js, adalah monolitik, mengakibatkan pelbagai kelemahan seperti prestasi yang lebih perlahan dan kerapuhan yang meningkat.
• Kelebihan Seni Bina Polilitik: Aplikasi ini boleh menjadi lebih pantas, lebih selamat dan lebih mudah difahami, kerana ia membenarkan penggunaan berasingan dan keadaan kurang dikongsi, mengurangkan permukaan serangan.
• Pertimbangan Kerumitan: Walaupun polylith mempunyai faedah yang jelas, ia memperkenalkan kerumitan dalam konfigurasi, bangunan dan penggunaan. Walau bagaimanapun, pembangun selalunya mencipta polylith secara tidak sengaja, terutamanya dalam aplikasi tindanan penuh.
• Peranan Vite v6: API Persekitaran baharu dalam Vite v6 memudahkan penciptaan aplikasi polilitik dengan mendayakan berbilang persekitaran dan binaan bebas tanpa kerumitan yang melampau, menyediakan ciri seperti penggantian modul panas (HMR).
Pooya Parsa, pencipta UnJS dan Nitro, memperkenalkan Nitro v3, kit alat pelayan untuk membina pelayan agnostik penempatan dengan API yang berkuasa. Nitro memudahkan penyusunan dan penggabungan aplikasi untuk mana-mana pembekal.
Komponen Utama:
Nitro v3 mengutamakan keserasian dengan standard web dan platform edge sambil mengekalkan sokongan Node.js. API baharu memudahkan definisi pelayan dan meningkatkan kebolehkomposisian, kebolehmerhatian dan kebolehujian.
Pooya juga mengumumkan H3 v2, dikeluarkan dengan Nitro v3, menampilkan saiz berkas yang lebih kecil dan pengendalian tindak balas yang lebih pantas, berdasarkan sepenuhnya pada standard web. Kemas kini masa hadapan akan meneroka integrasi Vite dan polyfill asli hibrid untuk keserasian dan prestasi yang lebih baik pada platform edge.
Dalam bahagian ini, kami akan membincangkan kemas kini yang bertujuan untuk memperkemas penyahpepijatan dan ujian. Ciri baharu dalam Chrome DevTools, Vitest dan Vue Devtool Kit menyediakan pembangun kawalan yang lebih besar, membantu memudahkan proses pembangunan.
Jecelyn daripada pasukan Chrome DevTools memperkenalkan empat alatan penting untuk penyahpepijatan yang lebih pantas dan berkesan:
Dalam satu siri 3 selam teknikal dalam, ahli pasukan teras Vitest, Vladimir (ahli pasukan Vitest & Vite), Ari (pasukan teras Vitest & jurutera StackBlitz) dan Misha Kaletsky (pengarang jenis jangkaan) berkongsi kemas kini tentang Vitest , rangka kerja ujian pantas dan moden untuk JavaScript yang telah menyaksikan muat turun mingguannya meningkat tiga kali ganda kepada kira-kira 6 juta pada tahun lalu.
Ceramah juga mempamerkan demonstrasi praktikal ciri-ciri ini, menekankan kemudahan penggunaan dan kecekapan Vitest. Pembesar suara menyerlahkan faedah menggunakan Vitest untuk pembangunan JavaScript dan TypeScript moden, terutamanya keupayaannya untuk mempercepatkan aliran kerja pembangunan dan memastikan kualiti kod.
Guillaume Chau, ahli pasukan Teras Vue.js, memperkenalkan Kit Devtool, rangka kerja penyatuan untuk memperkemas dan meningkatkan pembangunan dan keserasian alatan penyahpepijatan merentas Vue.js, Nuxt dan rangka kerja lain yang berpotensi. Nuxt dan Vue Devtools yang kaya dengan ciri tetapi tidak serasi mendorong penciptaan Kit Devtool, yang bertujuan untuk menyatukannya di bawah set utiliti dan API yang sama.
Matlamat utama adalah untuk menyeragamkan utiliti dan API untuk membolehkan saling kendali yang lancar antara Devtools dan memudahkan penciptaan Devtools baharu untuk sebarang rangka kerja, selain daripada Vue.js atau Nuxt, sambil menyokong pelbagai persekitaran seperti penyemak imbas, pelayan Node.js atau aplikasi kendiri.
Kit Devtool mempunyai empat modul:
Modul Utama: Mendaftar modul halaman dan mengawal kefungsian keseluruhan.
Modul Halaman: Beroperasi dalam konteks aplikasi pengguna, membenarkan interaksi dengan keadaan apl.
Modul Lihat: Mengurus antara muka yang boleh dilihat, memaparkan maklumat kepada pengguna.
Modul Pelayan: Mengendalikan interaksi sebelah pelayan semasa pembangunan.
Kit Devtool menampilkan sistem komunikasi dwiarah dan ditaip menggunakan teknologi seperti postMessage dan WebSockets, membolehkan interaksi lancar antara modul, tanpa mengira konteks.
Jangan lupa "applet" modular yang menyediakan pengalaman Devtools yang sangat disesuaikan, menyepadukan ciri daripada Vue.js, Nuxt, dan juga alatan pihak ketiga seperti Pinia atau Tailwind.
Joyee, penyumbang Node.js, mempersembahkan peningkatan terkini dan akan datang kepada sistem pemuatan modul Node.js, memfokuskan pada sokongan ESM dan pengalaman pembangun yang lebih baik.
ESM dalam memerlukan() (percubaan)
o Modul CommonJS kini boleh memerlukan() Modul ES.
o Had: Tiada sokongan menunggu peringkat atas.
o Datang ke Node.js 23 stable.
Penambahbaikan Pembangun
o Pengesanan automatik modul ES dalam fail .js.
o Modul menyusun cache untuk pemuatan lebih cepat.
o Pengesanan modul terbina dalam tanpa menunggu peringkat teratas.
o Alat untuk mencari kod menunggu peringkat atas yang bermasalah.
Pengurusan Pakej:
o Keadaan eksport baharu untuk mengelakkan isu dwi pakej
o Sokongan migrasi CommonJS yang lebih baik ke ESM
Alat Pembangun:
o Cangkuk pemuat modul segerak
o Fail konfigurasi masa jalan untuk persediaan persekitaran
Tumpuan adalah pada meningkatkan sokongan ESM sambil mengekalkan keserasian ke belakang dan pengalaman pembangun.
Dalam bahagian ini, kita akan menyelami aplikasi dunia sebenar Vite. Kajian kes daripada Excalidraw, Shopify dan projek lain menyerlahkan cara kelajuan, fleksibiliti dan pengalaman pembangun Vite membuat perbezaan dalam persekitaran pengeluaran.
Aakansha, penyelenggara Excalidraw, membincangkan pengalaman memindahkan projek daripada Create React App (CRA) ke Vite, didorong oleh keperluan untuk membina dan masa HMR yang lebih pantas, fleksibiliti yang lebih besar dan penyelenggaraan yang lebih baik.
Proses migrasi bermula selepas Patak menyepadukan Vite ke dalam Excalidraw pada 2021, yang menarik perhatian pasukan. Mereka memutuskan untuk berhijrah kerana masa pembinaan Vite yang lebih pantas, penggantian modul panas yang lebih baik dan komuniti yang semakin berkembang, cabarannya ialah:
Walau bagaimanapun, pasukan menghadapi isu utama selepas penggunaan - penurunan prestasi yang ketara dalam HMR untuk fail besar. Ini memberi kesan negatif kepada pengalaman pembangun, yang membawa kepada pemulihan. Selepas penyiasatan dan mengalih keluar pemalam, mereka dapat menyelesaikan isu itu dan berjaya menggunakan.
Penghijrahan Vite Excalidraw, dilengkapkan dengan bantuan komuniti yang besar, meningkatkan pengalaman pembangun dan binaan yang diperkemas.
Pembangun Jason Miller yang bekerja pada pangkalan kod React terbesar Shopify (5 juta baris TypeScript dan 800 laluan), Jason menyerlahkan faedah berhijrah daripada Webpack ke Vite. Penghijrahan ini membawa kepada masa permulaan 15 saat, mengurangkan prestasi HMR daripada 12 saat kepada 5 milisaat dan mengoptimumkan kiraan modul daripada 18,000 kepada 2,300. Penambahbaikan ini membolehkan pasukan beralih kepada pembangunan tempatan dan bukannya bergantung pada IDE berasaskan awan.
Christoph Nakazawa, Pembangun permainan Christoph menerangkan cara Vite membolehkannya membina Athena Crisis, permainan merentas platform dengan 214,000 baris JavaScript. Vite menyediakan 30ms hot-reload, sokongan luar talian melalui vite-plugin-pwa dan membenarkan penggabungan lancar kedua-dua kod frontend dan backend, yang membawa kepada kitaran penggunaan 3 minit yang pantas merentas berbilang platform.
Alvaro Sabu, seorang jurutera pengalaman pembangun di Storyblok dan pencipta perpustakaan TresJS, berkongsi perjalanan membina teka-teki 3D di halaman pendaratan ViteConf. Teka-teki interaktif ini, yang pengguna boleh selesaikan melalui editor kod bersepadu, telah dicipta dengan TresJS, perpustakaan 3D berasaskan Vue.
Alvaro menerangkan langkah-langkah penting dalam mereka bentuk teka-teki: mencipta kepingan tetrahedron dan oktahedron, melaksanakan logik putaran dengan kuaternion dan bingkai animasi, dan menyepadukannya dengan lancar ke dalam halaman web. Ciri yang menonjol ialah penggunaan WebContainers untuk membenamkan pelayan pembangunan Vite dalam halaman, membenarkan pengguna mengedit JavaScript di belakang teka-teki dalam masa nyata.
Alvaro turut menawarkan cerapan tentang mengatasi cabaran, seperti menggunakan kumpulan sementara untuk putaran berturut-turut dan mengoptimumkan prestasi. Projek ini menyerlahkan keupayaan TresJS dan WebContainers untuk mencipta pengalaman web 3D yang mengasyikkan dan boleh diedit.
Dalam bahagian ini, kita akan membincangkan masa depan ekosistem Vite dan tumpuan komunitinya. Perbincangan mengenai dokumentasi, prinsip sumber terbuka dan penumpuan rangka kerja menekankan peranan Vite dalam membina komuniti pembangun yang kolaboratif dan berpandangan ke hadapan.
Ben Holmes memperkenalkan apl "lokal dahulu", mempamerkan potensi mereka untuk dijalankan sepenuhnya dalam penyemak imbas. Dia menunjukkan perkara ini menggunakan Astro dan menekankan bagaimana SQLite boleh diuruskan di sisi klien dengan perpustakaan seperti SQLocal, menyimpan data dengan selamat dalam penyemak imbas. Perkara utama yang boleh diambil ialah:
Fungsi Carian:
. Carian Asas: Pada mulanya melaksanakan carian teks menggunakan pengendali LIKE SQL.
. Carian Dikuasakan AI: Disepadukan Pengekod Ayat Universal daripada
TensorFlow untuk carian pintar berasaskan persamaan, membolehkan pengguna mencari dokumen yang berkaitan walaupun dengan istilah yang tidak jelas.
Cerapan Teknikal: Cabaran yang dibincangkan seperti memuatkan model AI yang besar dalam penyemak imbas dan kepentingan menggunakan pekerja web untuk prestasi yang lebih baik.
Pengalaman Pengguna: Demo menampilkan elemen asli pelayar untuk kebolehaksesan dan animasi yang lancar dengan peralihan paparan, meningkatkan pengalaman carian.
Sebagai kesimpulan, Ben menyerlahkan masa depan yang menarik bagi pengiraan AI pada peranti dalam aplikasi yang diutamakan tempatan.
Mat Bilmann, Ketua Pegawai Eksekutif Netlify, menggariskan peralihan dalam pembangunan web daripada struktur monolitik kepada Jamstack dan rangka kerja moden, menekankan faedah mengasingkan bahagian hadapan dan bahagian belakang untuk lebih fleksibiliti dan skalabiliti. Walaupun rangka kerja awal seperti Gatsby, Next.js dan Nuxt.js memperkemas aliran kerja, ia juga menambahkan kerumitan.
Bilmann kini menyokong peralihan kepada primitif yang lebih kecil dan boleh digubah yang membolehkan aplikasi web yang lebih disesuaikan. Vite memainkan peranan penting dalam anjakan ini, menawarkan asas kukuh yang telah memangkin rangka kerja baharu seperti Astro, TanStack Start dan Vike. Rangka kerja ini mengutamakan kesederhanaan, modulariti dan prestasi, memperkasakan pembangun untuk membina aplikasi web yang cekap dan boleh diselenggara.
Minko Gechev, peneraju produk Angular di Google, membincangkan persamaan antara Angular dan React, bersama-sama dengan aliran masa depan dalam rangka kerja bahagian hadapan. Beliau menerangkan cara kedua-dua rangka kerja, walaupun menggunakan sintaks yang berbeza (templat lwn. JSX), menggunakan pendekatan yang serupa untuk pengesanan dan pengoptimuman perubahan.
Tumpuan teras ceramah Minko ialah pengenalan Isyarat, primitif yang juga digunakan oleh rangka kerja seperti Vue, Solid dan Svelte. Pelaksanaan Isyarat Angular telah meningkatkan prestasi dengan menjejak kebergantungan data dan meminimumkan pemaparan semula yang tidak perlu.
Minko menyerlahkan kerjasama Angular dengan rangka kerja Wiz Google, bertujuan untuk berkongsi pengoptimuman prestasi dan meningkatkan pengalaman pembangun. Contoh ketara termasuk ulang tayang acara, yang menangani jurang interaktiviti dengan cekap dan penghidratan tambahan, yang meningkatkan prestasi pemuatan halaman.
Beliau meramalkan bahawa rangka kerja akan terus menumpu pada pemuatan kod yang terperinci dan main semula acara untuk meningkatkan pengalaman pengguna, menekankan kestabilan, ekosistem dan keutamaan peribadi apabila memilih rangka kerja.
Brian Douglas (B Dougie), seorang tokoh penting di sebalik projek OpenSauced, membincangkan budaya dan pertumbuhan ekosistem Vite. Dia menyerlahkan bahawa Vite kini melihat 15 juta muat turun setiap minggu, satu pencapaian yang mengagumkan.
Dougie juga memperkenalkan StarSearch, alat yang dibangunkan oleh pasukannya untuk mengenal pasti penyumbang utama dalam komuniti Vite, menonjolkan tokoh seperti Anthony Fu, Patak, Brandon Roberts dan Toby untuk peranan mereka dalam memacu pembangunan dan penerimaan Vite. Dougie mengakhiri dengan petikan daripada Evan Yu, menekankan bahawa penyumbang yang hebat adalah kunci kejayaan Vite, dan tumpuan Vite pada pengalaman pembangun dan penyelesaian masalah adalah penting kepada pertumbuhannya merentas ekosistem bahagian hadapan.
Anthony Fu meneroka konsep progresif dalam pembangunan alat sumber terbuka semasa ceramahnya. Berikut ialah pengambilan utama:
Apa yang Menjadikan Alat Sumber Terbuka yang Baik?
Ceramah Sarah Rainsberger menekankan bagaimana dokumentasi ialah alat yang berkuasa dan sering diabaikan untuk pertumbuhan komuniti. Melabur dalam dokumen yang diselenggara dengan baik dan boleh diakses memupuk komuniti yang terlibat, mampan, mengukuhkan projek secara keseluruhan.
Dia menerangkan cara dokumen boleh memupuk komuniti sumber terbuka yang aktif:
Dalam bahagian ini, kami akan meneroka rangka kerja perintis yang mendorong Vite kepada keupayaan baharu. Ceramah tentang Vike, penyepaduan WebAssembly dan Zero to One mempamerkan cara Vite mendayakan pendekatan inovatif yang membentuk aplikasi web generasi seterusnya.
Mencipta Semula Rangka Kerja, dari Sifar kepada Satu
Nathan Wienert memperkenalkan "One," rangka kerja React baharu yang membezakan dirinya dengan dua ciri utama:
Penyediaan adalah mudah: buat apl One menggunakan npx one, dan ia berfungsi sebagai pemalam Vite untuk konfigurasi yang mudah. Satu menyokong pelbagai mod pemaparan (sebelah pelayan, statik atau sisi klien) dan mempertingkatkan ciri web dengan Tamagui untuk penggayaan yang dioptimumkan.
Rangka kerja dengan cekap mengendalikan pengambilan data dan penyegerakan antara pelayan dan pelanggan, menggunakan SWC untuk menggantikan Babel untuk masa binaan yang lebih pantas. Dengan sambungan khusus platform, ia membolehkan pengalaman berbeza merentas peranti, mempamerkan kepelbagaiannya untuk aplikasi statik dan dinamik.
Sesi Nathan menekankan matlamat One untuk merapatkan pembangunan web dan apl asli dengan lancar, menjadikannya tersedia sekarang, dengan Zero menghampiri beta awam.
Natalia Venditto, peneraju utama untuk pengalaman pembangun JavaScript di Microsoft Azure, membincangkan cara WebAssembly mendayakan pelaksanaan kod berprestasi tinggi dalam persekitaran JavaScript, kedua-dua bahagian klien dan pelayan.
Perkara Teknikal Utama
Asas WebAssembly
o Menyusun kod daripada bahasa seperti C /Rust kepada binari mudah alih.
o Bersepadu dengan lancar dengan JavaScript melalui pengikatan WebAssembly.
o Menjalankan operasi intensif pengiraan dengan lebih cekap.
Alat Pembangunan
o Pemalam Vite untuk penyepaduan WebAssembly.
o Menyahpepijat sokongan dalam penyemak imbas dan Kod VS.
o Penyahpepijatan peringkat sumber langsung bagi kod yang disusun.
Model Komponen
o Seni bina baharu untuk sokongan silang bahasa yang lebih baik.
o Mengendalikan jenis data yang kompleks melangkaui nombor.
o Membolehkan kompilasi JavaScript-ke-WebAssembly.
Akhir sekali, dia menekankan potensi WebAssembly untuk kemudahalihan dan komposisi dalam pembangunan serta menjemput pembangun untuk melibatkan diri dengan alatan dan pemalam yang sedang berkembang yang tersedia dalam ekosistem Vite.
Rom Brillout mempersembahkan Vike, rangka kerja hadapan generasi seterusnya yang direka bentuk untuk fleksibiliti. Beliau menjelaskan bahawa Vike adalah seperti Next.js atau Nuxt, tetapi dengan sambungan yang sangat disesuaikan yang membolehkan pembangun menggunakan mana-mana rangka kerja UI. Sebagai contoh, Vike boleh menjalankan apl dengan gabungan React, Solid atau Vue 2 dan 3 dalam projek yang sama. Ia menyokong semua strategi pemaparan (SPA, SSR dan SSG) dan disepadukan dengan pelbagai kaedah pengambilan data (RPC, REST, GraphQL).
Pembeza utama ialah model sumber terbuka Vike di bawah lesen MIT. Daripada model komersial tradisional, Vike menawarkan pendekatan unik di mana syarikat boleh membayar apa yang mereka pilih untuk kegunaan perusahaan. Matlamatnya adalah untuk mengekalkan Vike 100% sumber terbuka, menyediakan model perniagaan yang mampan sambil memastikan kebolehaksesan untuk semua pembangun. Walaupun pilihan fleksibiliti dan penyesuaiannya, Brillout menekankan bahawa Vike sudah pun stabil untuk kegunaan pengeluaran, dengan rancangan untuk mengeluarkan versi 1.0 tidak lama lagi.
Terima kasih kerana berjaya sampai ke penghujung artikel saya! Saya harap anda mendapatinya bermaklumat dan memperoleh pandangan baharu tentang perkembangan menarik daripada ViteConf 2024.
Artikel ini mengambil masa yang agak lama untuk diterbitkan daripada yang dirancang, kerana saya hanya boleh mengerjakannya pada hari Sabtu saya—tetapi perkara yang baik memerlukan masa, bukan? ?
Saya amat berterima kasih kepada rakan tersayang saya kerana membantu saya menyemak dan menggilap kandungan, dan kepada semua orang yang menggalakkan saya menerbitkan. Terima kasih kepada ChatGPT dan Claude? kerana membantu saya memperhalusi bahasa Inggeris saya, saya harap ia dapat dicapai dengan baik.
Ini adalah artikel teknikal pertama saya, dan sokongan anda amat bermakna bagi saya. Saya tidak sabar untuk menulis lebih banyak lagi dan terus berkongsi pengetahuan dengan komuniti pembangun.
Sila berasa bebas untuk berkongsi pendapat dan maklum balas anda—saya ingin mendengar daripada anda! Anda boleh menemui saya di:
X (Twitter): @Mohamed_LamineF atau LinkedIn: mohamedlaminef.
Atas ialah kandungan terperinci Inovasi ViteConf, Pengumuman dan Jalan Hadapan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Penyelesaian ralat HTTP 503
Apakah maksud nohup?
Apa itu Metaverse
Bagaimana untuk merujuk css dalam html
Telefon bimbit OnePlus milik jenama manakah?
Cara menggunakan return dalam bahasa C
Apakah fungsi pembinaan laman web?
vcruntime140.dll tidak dapat ditemui dan pelaksanaan kod tidak dapat diteruskan
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
