小鮮肉 Vite 會取代 OG Vue CLI 嗎？

序言

上週（2021.2.18），尤大發布了 Vite 2.0。緊跟尤大動態的童鞋應該都知道，2021 以來，尤大對 Vite 有多看重。日更頻率的提交 - commit 詳情

若是說 Vite 是 2021 年咱前端圈的新晉頂流小鮮肉當真一點不爲過！

尚不清楚的 XDM 可能想問，這玩意兒究竟是要幹嗎呢？

一句話歸納：

Vite 是一款全新的前端構建工具，它的服務器速度比 Vue CLI 快十到一百倍。

嗦嘎，咱們都知道，在 Vue CLI 項目，每次 npm run dev 或 npm run build 都要十幾秒甚至幾十秒、甚至幾分鐘都是有可能的，這確實讓人有點藍瘦。Vite 就是來解決這個痛點的。更高、更快、更強是咱們永遠的追求，在任何領域都是這樣。

那它原理是？

一句話歸納：

Vite 利用瀏覽器原生的 ES 模塊支持和用編譯到原生的語言開發的工具（如 esbuild）來提供一個快速且現代的開發體驗。

用大白話講，即 Vite 不須要像 Webpack 打包代碼，只需攔截瀏覽器發出的 ES imports 請求並作相應處理，實現真正意義上的按需。此處附兩張官網圖來對比兩者差別。

本文將稍做展開探討：Vite VS Vue CLI，一塊兒康康這位小鮮肉是否會取代咱 OG 老大哥？

Vue CLI

Vue CLI 是咱們搭建 Vue 項目的最強腳手架，由於它自帶 Webpack，以及其它最佳項目實踐配置。

包括：

• 項目結構
• 支持熱更新的開發服務器
• 插件系統
• 接口支持

也能夠這樣理解：Vue CLI 服務器的構建功能和性能是 Webpack 的超集。

Vite

和 Vue CLI 相似，Vite 也是一個構建工具，提供基本的項目框架和開發服務器。

可是，Vite 不是基於 Webpack 的，Vite 擁有本身的開發服務器，該服務器利用瀏覽器中的本機 ES 模塊。這種架構比 Webpack 的開發服務器要快幾個數量級。在生產環境，Vite 使用 Rollup 進行 build，速度也更快。

目前看，Vite 目標並非成爲像 Vue CLI 這樣具備多功能的構建工具，而是專一於提供快速的開發服務器和基本的構建服務。

惟快不破

Vite 服務器速度比 Vue CLI 自帶的 Webpack 服務器速度快十倍多，上圖以佐證。

完整的視頻在 Vite and VitePress - Evan You

在大型項目中，這一差別將更爲明顯。Webpack 開發服務器 build 和 re-build 速度可能會到 25 -30 秒，甚至更長。但對於同一項目，Vite 開發服務器可能總以 250ms 左右的恆定速度來構建項目。

打包與否

Webpack 的工做方式是經過處理程序中的每一個import、require將它們打包到不一樣的 bundle 中。

若是其中的一個依賴發生了改變，再次構建須要從新打包整個依賴關係。依賴項的數量和構建所花費的時間呈線性關係。

而 Vite 再也不進行打包操做。它依賴瀏覽器對 JavaScript 模板的本機支持（又稱 ES 模塊，這是一個相對較新的功能）。

截圖來自 MDN & basic-modules Github Demo

不足

目前咱們已經知道 Vite 能提供的就是 快，但它也存在一些不足：

• 瀏覽器兼容問題；

• 不支持所有的 CommonJS 模塊；
• 處於迭代初期，功能還在不斷變化；
• 項目構建不包括 Vuex、VueRouter 等工具；

因此，到底 用不用？ 以及 怎麼用？ 仍是見仁見智的問題。本瓜認爲，若是你受夠了 Webpack 的構建速度，或者你是敢於嘗新的人，那爲何不呢？

小結

綜上做個小結，目前這個 Vite 小鮮肉還不能取代咱 OG 老大哥 Vue CLI。

本篇並未進行實踐對比，只是從形而上進行了一個認知。可是咱們也已看到了 Vite 自身的光芒。也許有一天，Vue CLI 會兼容它成爲一個配置項。也許 Webpack6 也會支持利用瀏覽器的 ES 特性。也許 Vite 會徹底顛覆 Webpack（基於 http2 的普及）......

爲何不呢？

撰文不易，點贊鼓勵。討論留言，攜手向前。★,°:.☆(￣▽￣)/$:.°★ 。

關注公衆號：【掘金安東尼】

參考

• Vite 官方文檔
• has-vite-made-vue-cli-obsolete
• JavaScript modules 模塊