<ins id="jxy61"><option id="jxy61"><menu id="jxy61"></menu></option></ins>
          1. 煉數成金 門戶 大數據 網絡技術 查看內容

            Vite 2.0正式發布

            2021-2-23 11:26| 發布者: 煉數成金_小數| 查看: 30569| 評論: 0|原作者: 尤雨溪|來自: 尤雨溪的知乎專欄

            摘要: Vite 2.0 正式發布了!你可以把它理解為一個開箱即用的開發服務器 + 打包工具的組合,但是更輕更快。Vite 利用瀏覽器原生的 ES 模塊支持和用編譯到原生的語言開發的工具(如 esbuild)來提供一個快速且現代的開發體 ...
            Vite 2.0 正式發布了!

            Vite(法語意思是 “快”,發音為 /vit/,類似 veet)是一種全新的前端構建工具。你可以把它理解為一個開箱即用的開發服務器 + 打包工具的組合,但是更輕更快。Vite 利用瀏覽器原生的 ES 模塊支持和用編譯到原生的語言開發的工具(如 esbuild)來提供一個快速且現代的開發體驗。

            Vite 有多快?在 Repl.it 上從零啟動一個基于 Vite 的 React 應用,瀏覽器頁面加載完畢的時候,CRA(create-react-app)甚至還沒有裝完依賴。

            如果你還沒聽說過 Vite 到底是什么,可以了解一下項目的設計初衷。
            https://cn.vitejs.dev/guide/why.html

            如果你想要了解 Vite 跟其它一些類似的工具有什么區別,可以參考下方的對比:
            https://cn.vitejs.dev/guide/comparisons.html

            2.0 帶來了什么
            Vite 1.0 雖然之前進入了 RC 階段,但在發布之前我們決定進行一次徹底的重構來解決一些設計缺陷。所以 Vite 2.0 其實是 Vite 的第一個穩定版本。2.0 帶來了大量的改進:

            多框架支持
            Vite 一開始主要注重于 Vue 的單文件組件支持,但 2.0 基于之前的經驗提供了一個更穩定靈活的內部架構,從而可以完全通過插件機制來支持任意框架,F在 Vite 提供官方的 Vue, React, Preact, Lit Element 項目模版,而 Svelte 社區也在開發 Vite 整合方案。

            全新插件機制和 API
            Vite 2.0 受 WMR 的啟發采用了基于 Rollup 插件 API 的設計。很多 Rollup 插件可以跟 Vite 直接兼容。插件可以在使用 Rollup 插件鉤子之外使用一些額外的 Vite 特有的 API 來處理一些打包中不存在的需求,比如區分開發 vs 打包,或是自定義的熱更新處理。

            Vite 的 JS API 也得到了大幅改進 - 已經有不少用戶在開發基于 Vite 的上層框架,Nuxt 團隊也已經在 Nuxt 3 中驗證了初步整合的可行性。

            基于 esbuild 的依賴預打包
            由于 Vite 是一個基于原生 ESM 的開發服務器,在啟動時我們需要通過依賴預打包來達成兩個目的:1. 減少模塊 / 請求數量;2. 支持 CommonJS 依賴。預打包只有在依賴變動時才需要執行,但在有大量依賴的項目中,每次執行還是可能會需要很長時間。Vite 之前是使用 Rollup 來執行這個過程,在 2.0 中我們切換到了 esbuild,使這個過程加快了幾十倍。冷啟動一個之前需要將近 30 秒預打包的項目現在只需要不到兩秒!從 webpack 或其它打包工具遷移到 Vite 應該也會有類似的速度改善。

            更好的 CSS 支持
            Vite 將 CSS 看作模塊系統中的一等公民,并且內置了一下支持:
            強化路徑解析:CSS 中的 @import 和 url() 路徑都通過 Vite 的路徑解析器來解析,從而支持 alias 和 npm 依賴。
            自動 URL 改寫:所有 url() 路徑都會被自動改寫從而確保在開發和構建中都指向正確的文件路徑。
            CSS 代碼分割:構建時每一個被分割的 JS 文件都會自動生成一個對應的 CSS 文件,并且兩個文件會被自動并行按需加載。

            服務端渲染 (SSR) 支持
            Vite 2.0 提供實驗性的 SSR 支持。Vite 提供一個靈活的 API 來在 Node.js 中高效率地直接加載 ESM 源碼(并且同樣有精準的更新而不需要打包)。提供 CommonJS 版本的依賴會在 SSR 時自動被跳過轉換直接加載。生產環境下,服務器可以和 Vite 完全解耦; Vite SSR 的架構也可以很方便的做靜態預渲染(SSG)。

            舊瀏覽器支持
            Vite 默認只支持原生支持 ESM 的現代瀏覽器,但可以通過官方的 @vitejs/plugin-legacy 來支持舊瀏覽器。legacy 插件會自動額外生成一個針對舊瀏覽器的包,并且在 html 中插入根據瀏覽器 ESM 支持來選擇性加載對應包的代碼(類似 vue-cli 的 modern mode)。

            嘗試一下!
            功能很多,但是試一下其實很簡單。只需要一分鐘,用以下命令就可以迅速搭起一個基于 vite 的項目(確保你的 Node.js 版本 >=12):
            npm init @vitejs/app

            Vite 官方文檔還加入了從 Vite 1.0 遷移至 Vite 2.0 的說明:
            https://cn.vitejs.dev/guide/migration.html

            原文地址
            https://zhuanlan.zhihu.com/p/351147547

            聲明:文章收集于網絡,版權歸原作者所有,為傳播信息而發,如有侵權,請聯系小編刪除,謝謝!

            歡迎加入本站公開興趣群
            軟件開發技術群
            興趣范圍包括:Java,C/C++,Python,PHP,Ruby,shell等各種語言開發經驗交流,各種框架使用,外包項目機會,學習、培訓、跳槽等交流
            QQ群:26931708

            Hadoop源代碼研究群
            興趣范圍包括:Hadoop源代碼解讀,改進,優化,分布式系統場景定制,與Hadoop有關的各種開源項目,總之就是玩轉Hadoop
            QQ群:288410967 

            鮮花

            握手

            雷人

            路過

            雞蛋

            相關閱讀

            最新評論

            熱門頻道

            • 大數據

            即將開課

             

            GMT+8, 2021-4-16 10:18 , Processed in 0.117510 second(s), 25 queries .

            年轻人手机在线观看