Vite 從入門到精通，玩轉新時代前端建構法則

vite 從入門到精通，玩轉新時代前端建構法則【完結】

vite學習筆記：​​https://mp.weixin.qq.com/s/sub1vh0kybwkvbhziptpwq​​

vite 的優勢

1 真的很快

vite 非常非常快，對比 vue-cli(基于 webpack)： dev 啟動時長 dev 頁面加載 build 時長

vue-cli 2568ms 320ms 5.14s

vite 232ms 379ms 2.39s

❝ 示例代碼：vue3 項目，10個元件

❞

測試兩者的 dev 指令運作耗時相差十倍，且理論上，項目越大性能差距越大，為什麼呢？最大的原因是 vite 在開發模式下并沒有做太多打包操作！ webpack 啟動後會做一堆事情，經曆一條很長的編譯打包鍊條，從入口開始需要逐漸經曆文法解析、依賴收集、代碼轉譯、打包合并、代碼優化，最終将高版本的、離散的源碼編譯打包成低版本、高相容性的産物代碼，這可滿滿都是 cpu、io 操作啊，在 node 運作時下性能必然是有問題。 而 vite 運作 dev 指令後隻做了兩件事情，一是啟動了一個用于承載資源服務的 service；二是使用 esbuild 預建構 npm 依賴包。之後就一直躺着，直到浏覽器以 http 方式發來 esm 規範的子產品請求時，vite 才開始“「按需編譯」”被請求的子產品。

2 簡單

vite 的用法很簡單， 執行初始化指令： yarn create @vitejs/app my-vue-app --template vue

就得到了一個預設好的開發環境，可以開始愉快地寫 demo 了，vite 開箱就給你一堆功能，包括 css 預處理器、html 預處理器、hash 命名、異步加載、分包、壓縮、hmr 等：

這些功能，作者都按行業最佳實踐預設好了，通常不需要使用者介入做變更。 vite 的表現很容易讓人聯想到 vue-cli，不過兩者差別還是挺大的：vue-cli 底層依賴 webpack，實際的建構工作通常由各種 webpack loader、plugin 實作，比如 less => css 由 less-loader 實作；圖檔加載由 img-loader 實作等。這套設計很靈活，你可以在 webpack 體系下做任何你能想到的變更，隻需要學習一點點 webpack 的知識，包括百來個配置項、成千上萬的插件、若幹虛無缥缈的建構概念等。 而 vite 顯得特别簡潔，它隻是暴露了極少數的配置項與 plugin 接口，設計上就沒打算讓你做太多自定義操作。。。這是因為 vite 從一開始就沒打算做成另一個 webpack，而是做成一套“能夠顯著提升前端開發體驗的前端建構工具”，重在 「開發體驗」 啊同學們，vite 可謂是用心良苦，想盡辦法降低學習入門成本，它就不希望你為了使用工具又學一大堆複雜、缥缈的概念，希望這些事情都在架構層面屏蔽了 —— 雖然代價是喪失靈活性。 簡單說吧，vite 定位就是傻瓜式但強大的建構工具，你專心寫好業務代碼，早點下班，不用再為了工具費神費力了。