你好^_~;
我是 Lamine，很高興能分享我的第一篇技術文章，探討 ViteConf 2024 的亮點。作為一個深入技術寫作的技術愛好者，我期待您的回饋和建議，以幫助改進我未來的內容。
在深入討論會議細節之前，我們先來探討一下Vite和ViteConf是什麼？
Vite 是由 Evan You（Vue.js 的創建者）創建的下一代前端構建工具。它透過使用本機 ES 模組的開發伺服器提供閃電般快速的熱模組替換 (HMR)，從而顯著增強了 Web 開發體驗。 Vite 配置簡單，使用 Rollup 捆綁程式碼，並利用 SWC（Speedy Web Compiler）進行高效率的程式碼轉換。
ViteConf 是一年一度的免費線上活動，以引人入勝的互動形式將 Vite 社群聚集在一起。專家和愛好者齊聚一堂，分享知識並展示新功能。今年（2024 年 10 月 3 日至 4 日）是該活動的第三屆，在 12 小時的馬拉鬆比賽中設有 43 個工作坊。
總結 12 小時的內容以及大量技術細節非常具有挑戰性。但我已經盡力在不遺漏重要資訊的情況下最大限度地總結它。為了簡化我們的文章，我保留了大多數 ViteConf 演講的原始標題，並將它們分為 8 個主要部分：
我們的活動帶來了一些重大公告，為 Vite 的未來鋪平道路。富有遠見的演講者介紹了具有重塑網路開發潛力的改變遊戲規則的工具和平台。讓我們來深入了解一下亮點吧！
Evan You 宣布成立 Void Zero，這是一家專注於建立下一代 JavaScript 工具的新公司。該公司已籌集了 460 萬美元的種子資金，由 Accel 和 Amplify Partners 牽頭，開發者工具領域經驗豐富的創辦人也參與其中。 Void Zero 致力於實現 Evan 的願景，即為 JavaScript 開發創建一個與運行時無關的統一、高效能和可組合的工具鏈。 Evan 還討論了 Void Zero 目前的進展，並分享了一些令人印象深刻的測試基準，這些基準肯定會令人驚嘆。
StackBlitz 共同創辦人 Eric Simons 宣布 Bolt.new，這是一款革命性工具，利用 StackBlitz 的 WebContainer 技術的既定功能，有望重塑 Web 開發格局。 Bolt.new 為開發人員提供了全端、瀏覽器內環境，允許即時專案建立、偵錯、錯誤修復和部署，所有這些均由最先進的大型語言模型 Claude 和 V0 提供支援。
Eric 解釋了 Bolt.new 是如何設計來消除設定時間的。透過輸入簡單的提示，開發人員可以直接從瀏覽器產生完全配置的應用程序，這真正改變了遊戲規則。透過整合的套件管理和依賴性處理，他在演講中展示的力量是無與倫比的。掌握其潛力的最佳方法就是親自嘗試 Bolt.new。
在此公告後，Eric 也透露了另一個重大更新：Bolt.new Core 現已開源並可在 github 上使用。
在Evan 介紹了OXC 和Rolldown 以及它們即將與Vite 環境整合之後，Oxc 專案的創建者Boshen Chen 介紹了OXC，這是一個用Rust 編寫的雄心勃勃、高性能、完全整合的JavaScript 工具鏈，旨在顯著提高提高效能和開發人員體驗。它包括：
未來計畫的組件包括：
博神也推出了Vite未來的捆綁器Rolldown，它使用OXC作為其核心引擎。 Rolldown 提供高效能並支援一系列功能，包括 tree-shaking、程式碼分割和外掛程式相容性。
下一步涉及 Vite 與 OXC 和 Rolldown 的更深入集成，這將帶來顯著的效能提升、更一致的開發者體驗以及處理更大、更複雜的 Web 應用程式的能力。
Matias (Patak) 推出了環境 API，這是一項旨在增強 Vite 靈活性和效能的重大演變。此API允許開發人員在單一Vite專案中定義多個環境（例如：客戶端、伺服器、邊緣），從而簡化開發和部署流程。他注意到自 ViteConf 第一年以來，Nuxt、Remix 和 TanStack 等元框架的湧入。
演講的主要內容包括：
Tomek 推出了 TutorialKit，這是一個創新的開源工具集，用於重新定義 JavaScript 生態系統中的互動式教學課程建立。為了解決目前文件的局限性，TutorialKit 提供了精心策劃的實踐學習體驗，將使用者指南與結構化演示和練習相結合。
TutorialKit 由 WebContainers 提供支持，基於 Svelte、Angular 和 Nuxt 等框架的見解而建構。透過一個命令 npm createtutorial，開發人員可以快速產生一個完整的教程專案——在不到一分鐘的時間內完成課程描述、程式碼片段和即時預覽。
TutorialKit 是高度可自訂的，提供深色和淺色主題以及互動式終端，讓學習者能夠充分參與材料。該工具使開發人員、教育工作者和社群等能夠直接在瀏覽器中創建更具吸引力的教育資源。
Mohammad 推出了 pkg.pr.new，這是一個供 npm 庫維護者和用戶預覽未發布的分支、修復或功能的工具，無需複雜的設定。使用簡單的指令，例如：
npm 我 https://pkg.pr.new/${owner}/${repo}/${package}@{commit}
開發者可以立即測試特定版本，繞過持續發布等繁瑣方法。
下一步包括與 ESM.sh 整合以提供 CDN 支援和自訂 UI，將 pkg.pr.new 的功能擴展到 Deno 和 Vue Playground 等環境。
在本節中，我們將探索使 Vite 更具適應性的新整合。從 Angular 支援到增強的測試和 CI 工作流程，這些更新揭示了 Vite 如何擴大其覆蓋範圍並簡化開發者體驗。
Chromatic 的 Storybook 維護人員 Yann Braga 推出了與 Vite 和 Vitest 的重要新集成，改變了 UI 組件的開發和測試。這些更新引入了 Vitest 插件，可將 Storybook 故事轉換為功能測試，無需額外的測試案例即可輕鬆增加程式碼覆蓋率。該外掛程式的可視化調試功能可讓開發人員從 CI 環境中即時檢查失敗的測試，從而促進無縫的團隊協作。
在版本 9 中，Storybook 計劃將視覺、可訪問性和功能測試統一到一個有凝聚力的 UI 中，並過渡到僅 ESM 版本，以減少安裝大小並提高效能。這些進步強化了 Storybook 對高效、簡化的前端工作流程和全面組件測試的承諾。
Nx 資深工程師 Katerina Skroumpelou 強調了 Nx 為 Vite 專案帶來的效率。她首先討論了 Nx 如何優化 CI 工作流程並自動執行複雜任務，從而使建置流程更快、更簡化。
接下來，她示範如何在 React Vite 專案中使用 Nx。該演示展示了 Nx 如何透過快取和 Nx 雲端整合等功能來增強效能。 Nx Cloud 支援擴展和任務重播，提供並行執行以提高速度。也新增了「nxaffected」指令，僅針對程式碼庫修改部分智慧運行任務，進一步優化 CI。
Katerina 強調，Nx 外掛程式（例如 ESLint 和 Vite 的外掛程式）可以簡化遷移並無縫維護程式碼，而不會破壞現有結構。最後，她展示瞭如何為 CI 設定 GitHub Actions，展示了 Nx 跨代理程式高效分配任務的能力。
顧問公司 Evil Martians 的營運者 Irina Nazarova 分享了 Vite Ruby 如何改變 Rails 應用程式中的開發人員體驗，為 Rails 的「No Build」方法提供了更好的替代方案。 Vite Ruby 已在 Power Home Remodeling Group 和 ClickFunnels 等公司成功實施，實現了更複雜的前端設置，同時保持了 Rails 開發人員友好的理念。
Bit 軟體工程師、Vue.js Conf 團隊成員趙錦江討論了 Bit 從 Webpack/Jest 到 Vite/Vitest 的過渡。此開關允許具有整合測試的自訂開發環境、最佳化的建置和測試工作流程以及透過 Node API 增強的靈活性，從而促進了組件驅動的開發。
在本節中，我們將了解 Vite 如何為 SolidJS、Svelte 和 Remix 等主要框架提供支援。這些進展展示了 Vite 如何根據每個框架的需求推動新功能和效能改進。
SolidJS 的創建者 Ryan Carniato 分享了 SolidStart（5 月達到 1.0 版本）如何發展以統一客戶端和伺服器開發。 SolidStart 基於 Vite、Vinxi 和 Nitro 構建，引入了伺服器功能，並成為第一個具有簡化、無路由器架構的 JavaScript 框架，實現了令人印象深刻的輕量級 4.7KB 捆綁包大小。
在 Chrome 團隊的資助下，Ryan 和 Alexis 開發了 Seroval，這是一個強大的序列化工具，能夠處理非同步資料和串流。這帶來了一項重大突破：單次突變，它將操作和數據獲取有效地結合到一個無縫請求中。他們透過互動式 Trello 看板示範示範了這個概念，展示了效能提升。
Ryan也強調了Vite生態系統對於實現快速原型的重要性，並強調了它對Solid 2.0發展的影響。
Lukas Taegert-Atkinson 介紹了 Rollup 最近和即將推出的增強功能：
Pedro Cattori 和 Mark Dalgleish 介紹了將 Remix 遷移到 Vite 所帶來的改進。
Pedro 專注於伺服器程式碼隔離，解釋了他們如何擺脫依賴 treeshaking 來從客戶端套件中刪除伺服器程式碼。相反，他們實作了明確 Remix 轉換並引入了 .server 檔案後綴，當伺服器程式碼可能洩漏到客戶端時，這會提供明確的建置時錯誤。
Mark 介紹了 CSS 處理改進，展示了它們如何從 Remix 原始的基於 URL 的 CSS 導入演變為利用 Vite 的內建功能。這包括透過 Rollup 實現更好的 CSS 分塊，以及使用 Vite 的 URL 查詢字串進行 CSS 導入的開發模式解決方案，確保開發和生產之間的行為一致，同時避免樣式閃爍。
這些變化為 Remix 框架帶來了更好的開發者體驗、更穩健的程式碼分離以及更有效率的 CSS 處理，展示了 Vite 遷移如何推動他們改進核心架構。
Shai Reznik 以有趣、俏皮的介紹開始他的演講，將自己描述為“傳奇表演者”，對他的技術能力有著令人印象深刻的說法。
在演講中，Shai 重點介紹了 Qwik，這是一個 JS 框架，旨在透過消除水合作用來優化應用程式效能。與傳統的伺服器端渲染框架不同，傳統的伺服器端渲染框架依靠水合作用，透過在客戶端重新運行 JS 來使應用程式具有互動性，Qwik 使用「JavaScript 流」。此過程將應用程式分解為微小的片段，在伺服器端渲染期間對應用程式的結構和事件偵聽器進行編碼。然後，這些片段被傳送到客戶端，Qwik 在後台緩衝必要的程式碼。因此，一旦使用者與其交互，應用程式就會變得具有交互性，而無需等待 JS 載入。
Shai 解釋說，Qwik 會自動處理此過程，無需動態導入和延遲載入等手動最佳化。這可以透過加快載入時間來改善使用者體驗和搜尋引擎優化 (SEO)。他還強調了 Qwik 的無縫擴展能力，使其既適用於簡單的行銷網站，也適用於複雜的應用程式。 Shai 向觀眾保證 Qwik 很穩定，擁有不斷發展的社區和生態系統，包括身份驗證、測試和部署的整合。
此外，Shai 還引入了未來的功能，例如預測緩衝、AI 驅動的最佳化（如死程式碼消除）和自動重構，旨在進一步簡化開發流程並提高應用程式效能。
Volar.js 的創建者Johnson Chu 推出了一個突破性的框架，用於構建支援跨各種環境的嵌入式語言的語言工具，例如Vue.js、React、Svelte 以及集成在Vite 生態系統中的工具。 Volar.js 現在已被廣泛採用，強調效率和模組化，使其成為優化開發工作流程的重要組成部分，特別是在使用 Vite 建置的專案中。
Johnson 分解了 Volar 的架構，強調：
Svelte 團隊的 Rich 宣布對 Svelte 5 進行重大重寫，旨在解決 Svelte 反應式系統的核心限制，儘管它在開發人員中很受歡迎。他將 Svelte 目前的結構概括為四點：
Chris Manson 討論了 Ember.js 這個已有 13 年歷史的前端框架如何透過 Vite 整合不斷發展。 Ember 的遺留建置系統 Broccoli 對程式碼分割等現代最佳化提出了挑戰。為了解決這個問題，引入了 Embroider 來彌合 Ember 的遺留建造系統和現代捆綁器之間的差距。它將 Ember 的傳統西蘭花樹預處理為更清晰的結構，可以由新的捆綁器處理。 Embroider 的早期版本可與 Webpack 配合使用，但不穩定，需要進一步努力使其與 Vite 相容。
關鍵的挑戰是調整 Vite 的模組優先方法，使其與 Ember 較舊的基於 AMD 的模組配合使用。該解決方案涉及重新構建構建過程，其中 Vite 使用 Ember 插件驅動構建，而不是運行 Vite 的 Ember CLI。 Embroider Vite 插件的創建是為了處理模組解析和元數據，確保更順暢的整合。
其成果是為 Ember 應用程式提供了一個使用 Vite 建置的工作系統，我們正在努力使其成為新專案的預設體驗。
在本節中，我們將討論將 Vite 性能推向新高度的工具和技術。關於 Nitro v3、Rollup 中的 Rust 整合以及本地優先 SQLite 應用程式的討論揭示了建立更快、更有效率的應用程式的策略。
CrabNebula 的X 主管、Tauri 工作小組和SolidJS DX 團隊的主要貢獻者Atila 推出了Taurify，這是一種新的SDK，旨在使用Tauri 技術將Web 應用程式轉換為本機桌面和行動應用程式。
五個主要特點：
現場示範：
Nuxt 核心團隊負責人 Daniel Roe 提出了使用 Vite 和 Nuxt 優化 Web 字型效能的創新方法。他解釋了網頁字體的挑戰，例如佈局變化和效能問題。 Roe介紹了3種工具：
Daniel 也強調了 Vite 的優勢，特別是其多態性，可以實現 Nuxt 等框架與 Vite 團隊之間的無縫協作。
AnalogJS 的創建者和 NgRx 維護者 Brandon Roberts 介紹了 AnalogJS，這是一個基於 Vite 構建的 Angular 元框架。他宣布發布 AnalogJS V1.8，旨在透過 Vite、Nitro 和 Nx 等工具增強 Angular 生態系統，打造全端解決方案。 Analog 利用現代 Angular 功能，例如獨立元件和增強的伺服器端渲染 (SSR)，提供基於檔案的路由、靜態網站產生和整合 API 路由。
主要功能和整合：
• SSR 與靜態產生： 支援各種平台（Node、Edge、Vercel 等）。
• API 路由： 輕鬆定義伺服器端點以及元件。
• 測試工具： 與 Vitest 和 Playwright 集成，使 Angular 與現代測試實踐保持一致。
• Storybook 及更多： Vite 支援與 Storybook 等元件庫整合。
羅伯茨還透露了實驗性功能，包括模擬單一檔案元件 (SFC) 和表單操作，旨在簡化客戶端-伺服器資料處理。
Bjorn Lu 以幽默的方式開場，開玩笑地談到了“性能神話”，然後深入探討了提高 Web 應用程式效能的策略。他們強調了三個關鍵面向：
Igor 是Cloudflare 的軟體工程師，也是Angular 的前貢獻者，他討論了「Web 多片」的概念，作為傳統整體式Web 應用程式的替代方案（多片應用程式由許多元件組成，獨立運行以提高靈活性和魯棒性）。他強調了多片應用程式的好處，多片應用程式由多個可以在不同上下文中運行的獨立組件組成，與通常具有單入口點並可能導致性能問題、效率低下和安全風險的單片應用程式形成對比。
重點包括：
• 單體應用程式的當前狀態： 如今的許多應用程式（例如 SPA 和 Node.js 應用程式）都是單體應用程序，從而導致效能降低和脆弱性增加等各種缺點。
• 多片架構的優點：這些應用程式可以更快、更安全、更易於理解，因為它們允許單獨部署和更少的共享狀態，從而減少攻擊面。
• 複雜性考量： 雖然多區塊具有明顯的優勢，但它們帶來了配置、建置和部署的複雜性。然而，開發人員經常無意中創建多塊，尤其是在全端應用程式中。
• Vite v6 的作用： Vite v6 中新的環境API 透過啟用多個環境和獨立建置而簡化了多片應用程式的創建，而不會帶來巨大的複雜性，並提供熱模組替換（HMR）等功能。
UnJS 和 Nitro 的創建者 Pooya Parsa 推出了 Nitro v3，這是一個伺服器工具包，用於使用強大的 API 建置與部署無關的伺服器。 Nitro 簡化了任何提供者的應用程式編譯和捆綁。
關鍵組件：
Nitro v3 優先考慮與 Web 標準和邊緣平台的兼容性，同時保持 Node.js 支援。新的 API 簡化了伺服器定義並增強了可組合性、可觀察性和可測試性。
Pooya 也發布了 H3 v2，與 Nitro v3 一起發布，具有更小的捆綁包大小和更快的響應處理速度，完全基於 Web 標準。未來的更新將探索 Vite 整合和混合原生 Polyfill，以在邊緣平台上實現更好的相容性和效能。
在本節中，我們將介紹旨在簡化除錯和測試的更新。 Chrome DevTools、Vitest 和 Vue Devtool Kit 中的新功能為開發人員提供了更大的控制權，有助於簡化開發流程。
Chrome DevTools 團隊的 Jecelyn 介紹了四個基本工具，可以實現更快、更有效的調試：
在一系列的3個技術深度探討中，Vitest核心團隊成員Vladimir（Vitest和Vite團隊成員）、Ari（Vitest核心團隊和StackBlitz工程師）和Misha Kaletsky（expect-type作者）分享了有關Vitest的更新，一個快速而現代的JavaScript 測試框架，在過去的一年裡，每週的下載量增加了三倍，達到約600 萬次。
講座也展示了這些功能的實際演示，強調了 Vitest 的易用性和高效性。演講者強調了使用 Vitest 進行現代 JavaScript 和 TypeScript 開發的好處，特別是它能夠加速開發工作流程並確保程式碼品質。
Vue.js 核心團隊成員 Guillaume Chau 介紹了 Devtool Kit，這是一個統一框架，用於簡化和增強跨 Vue.js、Nuxt 和潛在其他框架的調試工具的開發和兼容性。功能豐富但不相容的 Nuxt 和 Vue Devtools 促使了 Devtool Kit 的創建，旨在將它們統一在一組通用的實用程式和 API 下。
主要目標是標準化實用程式和API，以允許Devtools 之間的無縫互通性，並促進為任何框架（不僅僅是Vue.js 或Nuxt）創建新的Devtools，同時支援各種環境，例如瀏覽器、Node.js 伺服器或獨立應用程式。
開發工具套件有四個模組：
主模組：註冊頁面模組並控制整體功能。
頁面模組：在使用者應用程式上下文中操作，允許與應用程式狀態互動。
視圖模組：管理可見介面，向使用者顯示資訊。
伺服器模組： 在開發過程中處理伺服器端互動。
Devtool Kit 具有使用 postMessage 和 WebSockets 等技術的雙向類型通訊系統，無論上下文如何，都可以實現模組之間的無縫互動。
我們不要忘記模組化的“小程式”，它提供了高度客製化的 Devtools 體驗，整合了 Vue.js、Nuxt 甚至 Pinia 或 Tailwind 等第三方工具的功能。
Joyee，Node.js 貢獻者，介紹了 Node.js 模組載入系統的最新和即將推出的改進，重點是更好的 ESM 支援和開發人員體驗。
require() 中的 ESM（實驗性）
o CommonJS 模組現在可以 require() ES 模組。
o 限制：沒有頂級等待支援。
o 即將進入 Node.js 23 穩定版。
開發人員改進
o 自動偵測 .js 檔案中的 ES 模組。
o 模組編譯快取以加快載入速度。
o 內建模組偵測，無需頂級等待。
o 用於定位有問題的頂級等待程式碼的工具。
套件管理：
o 新的出口條件以防止雙重包裝問題
o 更好的 CommonJS 到 ESM 遷移支援
開發者工具：
o 同步模組載入器鉤子
o 用於環境設定的運行時設定檔
重點是改進 ESM 支持，同時保持向後相容性和開發人員體驗。
在本節中，我們將深入探討 Vite 的實際應用。 Excalidraw、Shopify 和其他專案的案例研究凸顯了 Vite 的速度、靈活性和開發人員體驗如何在生產環境中發揮作用。
Excalidraw 的維護者 Aakansha 討論了將專案從 Create React App (CRA) 遷移到 Vite 的經驗，這是由於需要更快的建置和 HMR 時間、更大的靈活性和更好的維護。
2021 年 Patak 將 Vite 整合到 Excalidraw 後，遷移過程開始，引起了團隊的注意。由於 Vite 更快的建造時間、更好的熱模組替換以及不斷增長的社區，他們決定遷移，面臨的挑戰是：
但是，團隊在部署後遇到了一個主要問題 - HMR 對於大檔案的效能顯著下降。這對開發者體驗產生了負面影響，導致了恢復。經過調查並刪除插件後，他們解決了問題並成功部署。
Excalidraw 的 Vite 遷移在社群的大力幫助下完成，增強了開發者體驗並簡化了建置。
Jason Miller 開發人員致力於 Shopify 最大的 React 程式碼庫（500 萬行 TypeScript 和 800 條路由），Jason 強調了從 Webpack 遷移到 Vite 的好處。此遷移使啟動時間縮短為 15 秒，將 HMR 效能從 12 秒降低到 5 毫秒，並將模組數量從 18,000 個最佳化到 2,300 個。這些改進使團隊能夠轉向本地開發，而不是依賴基於雲端的 IDE。
Christoph Nakazawa，遊戲開發者 Christoph 解釋了 Vite 如何幫助他建立 Athena Crisis，一款包含 214,000 行 JavaScript 的跨平台遊戲。 Vite 透過 vite-plugin-pwa 提供 30ms 熱重載和離線支持，並允許前端和後端程式碼無縫捆綁，從而實現跨平台的快速 3 分鐘部署週期。
Storyblok 的開發體驗工程師、TresJS 函式庫的創建者 Alvaro Sabu 在 ViteConf 登陸頁面分享了建置 3D 拼圖的歷程。這個互動式謎題是使用基於 Vue 的 3D 庫 TresJS 創建的，用戶可以透過整合程式碼編輯器來解決。
阿爾瓦羅描述了設計拼圖的關鍵步驟：創建四面體和八面體塊，使用四元數和動畫幀實現旋轉邏輯，並將其無縫整合到網頁中。一個突出的功能是使用 WebContainers 在頁面中嵌入 Vite 開發伺服器，允許使用者即時編輯拼圖背後的 JavaScript。
阿爾瓦羅還提供了有關克服挑戰的見解，例如使用臨時小組進行連續輪換和優化性能。該專案強調了 TresJS 和 WebContainers 創建沉浸式、可編輯 3D Web 體驗的能力。
在本節中，我們將討論 Vite 生態系統的未來及其社區重點。關於文件、開源原則和框架融合的討論強調了 Vite 在建立協作、前瞻性開發者社群方面的作用。
Ben Holmes 推出了「本地優先」應用程序，展示了它們完全在瀏覽器中運行的潛力。他使用 Astro 演示了這一點，並強調如何使用 SQLocal 等程式庫在客戶端管理 SQLite，從而將資料安全地儲存在瀏覽器中。關鍵要點是：
搜尋功能：
。 基本搜尋：最初使用SQL的LIKE運算子實現文字搜尋。
。 AI 驅動的搜尋：整合了
的通用句子編碼器
TensorFlow 用於基於相似性的智慧搜索，使用戶即使在術語模糊的情況下也能找到相關文件。
技術見解：討論了在瀏覽器中載入大型 AI 模型等挑戰以及使用 Web Worker 來提高效能的重要性。
使用者體驗：此示範採用瀏覽器原生元素來實現可存取性和具有視圖轉換的流暢動畫，從而增強搜尋體驗。
最後，Ben 強調了本地優先應用中設備端 AI 運算令人興奮的未來。
Netlify 執行長 Mat Bilmann 概述了 Web 開發從整體結構到 Jamstack 和現代框架的轉變，強調了前端和後端解耦以獲得更大靈活性和可擴展性的好處。雖然 Gatsby、Next.js 和 Nuxt.js 等早期框架簡化了工作流程，但它們也增加了複雜性。
Bilmann 現在主張過渡到更小的、可組合的原語，以允許更客製化的 Web 應用程式。 Vite 在這一轉變中發揮關鍵作用，為 Astro、TanStack Start 和 Vike 等新框架的誕生提供了堅實的基礎。這些框架優先考慮簡單性、模組化和效能，使開發人員能夠建立高效且可維護的 Web 應用程式。
Google Angular 產品負責人 Minko Gechev 討論了 Angular 和 React 之間的相似之處，以及前端框架的未來趨勢。他解釋了這兩個框架儘管使用不同的語法（模板與 JSX），卻如何利用類似的方法進行變更檢測和優化。
Minko 演講的核心焦點是 Signals 的介紹，這是 Vue、Solid 和 Svelte 等框架也使用的原語。 Angular 的 Signals 實作透過追蹤資料依賴性並最大限度地減少不必要的重新渲染來提高效能。
Minko 強調了 Angular 與 Google Wiz 框架的合作，旨在共享效能最佳化並增強開發人員體驗。值得注意的例子包括事件重播，它可以有效地解決互動性差距，以及增量水合作用，它可以提高頁面載入效能。
他預測框架將繼續向細粒度的程式碼載入和事件重播靠攏，以增強使用者體驗，在選擇框架時強調穩定性、生態系統和個人喜好。
OpenSauced 計畫背後的關鍵人物 Brian Douglas（B Dougie）討論了 Vite 生態的文化和發展。他強調，Vite 現在每週的下載量達到 1500 萬次，這是一個令人印象深刻的里程碑。
Dougie 也介紹了StarSearch，這是他的團隊開發的一款工具，用於識別Vite 社群中的關鍵貢獻者，重點關注Anthony Fu、Patak、Brandon Roberts 和Toby 等人物在推動Vite 開發和採用方面所發揮的作用。 Dougie 最後引用了 Evan Yu 的一句話，強調偉大的貢獻者是 Vite 成功的關鍵，而 Vite 對開發者體驗和問題解決的關注是其在前端生態系統中發展的核心。
Anthony Fu 在演講中探討了開源工具開發的漸進性概念。以下是主要要點：
怎樣才是好的開源工具？
Sarah Rainsberger 的演講強調了文件如何成為社區發展的強大但經常被忽視的工具。投資於維護良好且易於存取的文件可以培養一個積極參與、可持續發展的社區，從而從整體上加強專案。
她解釋了文件如何培育活躍的開源社群：
在本節中，我們將探索推動 Vite 實現新功能的開創性框架。關於 Vike、WebAssembly 整合和零到一的演講展示了 Vite 如何實現塑造下一代 Web 應用程式的創新方法。
重塑框架，從零到一
Nathan Wienert 推出了“One”，這是一個新的 React 框架，它具有兩個主要功能：
設定非常簡單：使用 npx one 建立一個 One 應用程序，它充當 Vite 插件，方便配置。支援多種渲染模式（伺服器端、靜態或客戶端），並使用 Tamagui 增強 Web 功能以最佳化樣式。
此框架有效處理伺服器和用戶端之間的資料取得和同步，使用 SWC 取代 Babel 以加快建置時間。透過特定於平台的擴展，它可以跨裝置提供獨特的體驗，展示其靜態和動態應用程式的多功能性。
Nathan 的會議強調了 One 的目標，即無縫連接 Web 和本機應用程式開發，使其立即可用，零即將公開測試版。
Natalia Venditto，Microsoft Azure 的 JavaScript 開發體驗主要負責人，討論了 WebAssembly 如何在 JavaScript 環境（客戶端和伺服器端）中實現高效能程式碼執行。
關鍵技術點
WebAssembly 基礎
o 將程式碼從 C /Rust 等語言編譯為可移植的二進位。
o 透過 WebAssembly 綁定與 JavaScript 無縫整合。
o 更有效率地運行運算密集型操作。
開發工具
o 用於 WebAssembly 整合的 Vite 插件。
o 瀏覽器和 VS Code 中的偵錯支援。
o 對已編譯程式碼進行直接原始碼級偵錯。
組件模型
o 新架構提供更好的跨語言支援。
o 處理數字以外的複雜資料型態。
o 啟用 JavaScript 到 WebAssembly 編譯。
最後，她強調了 WebAssembly 在開發中的可移植性和組合性方面的潛力，並邀請開發者參與 Vite 生態系統中不斷發展的工具和插件。
Rom Brillout 推出了 Vike，這是一款專為靈活性而設計的下一代前端框架。他解釋說，Vike 就像 Next.js 或 Nuxt，但具有高度可自訂的擴展，允許開發人員使用任何 UI 框架。例如，Vike 可以在同一專案中混合使用 React、Solid 甚至 Vue 2 和 3 來運行應用程式。它支援所有渲染策略（SPA、SSR 和 SSG），並與各種資料擷取方法（RPC、REST、GraphQL）整合。
關鍵的差異在於 Vike 在 MIT 授權下的開源模型。 Vike 不是傳統的商業模式，而是提供了一種獨特的方法，公司可以根據自己選擇的企業用途付費。目標是保持 Vike 100% 開源，提供可持續的商業模式，同時確保所有開發人員均可存取。儘管具有靈活性和自訂選項，Brillout 強調 Vike 已經可以穩定用於生產用途，並計劃很快發布 1.0 版本。
謝謝您看到我文章的結尾！我希望您覺得它內容豐富，並對 ViteConf 2024 令人興奮的發展有了新的見解。
這篇文章的發佈時間比計劃的要長一些，因為我只能在周六的時候寫它——但好事需要時間，對吧？ ？
特別感謝我親愛的朋友幫我審閱和潤飾內容，以及所有鼓勵我發表的人。特別感謝 ChatGPT 和 Claude ？幫助我提高英語水平，我希望它能很好地表達。
這是我的第一篇技術文章，您的支持對我來說意義重大。我期待寫更多內容並繼續與開發者社群分享知識。
請隨時分享您的想法和回饋—我很樂意聽取您的意見！你可以在以下位置找到我：
X (Twitter)：@Mohamed_LamineF 或 LinkedIn：mohamedlaminef。
以上是ViteConf 創新、公告和未來之路的詳細內容。更多資訊請關注PHP中文網其他相關文章！
