Vite和Vue CLI的優(yōu)劣

更新時間：2021年01月30日 15:28:46 作者：程序員張張

這篇文章主要介紹了Vite比Vue CLI快在哪里，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下

Vue 生態(tài)系統(tǒng)中有一個名為 Vite 的新構建工具，它的開發(fā)服務器比 Vue CLI 快 10-100 倍。

這是否意味著 Vue CLI 已經過時了?在本文中，我將比較這兩種構建工具，并說明它們的優(yōu)缺點，以便你可以決定哪一種適合你的下一個項目。

Vue CLI 概述

大多數 Vue 開發(fā)人員都知道，Vue CLI 是使用標準構建工具和最佳實踐配置快速建立基于 Vue 的項目的不可或缺的工具。

其主要功能包括：

在本討論中需要注意的是，Vue CLI 是構建在 Webpack 之上的，因此開發(fā)服務器和構建功能和性能都將是 Webpack 的超集。

與 Vue CLI 類似，Vite 也是一個提供基本項目腳手架和開發(fā)服務器的構建工具。

然而，Vite 并不是基于 Webpack 的，它有自己的開發(fā)服務器，利用瀏覽器中的原生 ES 模塊。這種架構使得 Vite 比 Webpack 的開發(fā)服務器快了好幾個數量級。Vite 采用 Rollup 進行構建，速度也更快。

Vite 目前還處于測試階段，看來 Vite 項目的目的并不是像 Vue CLI 那樣的一體化工具，而是專注于提供一個快速的開發(fā)服務器和基本的構建工具。

Vite 開發(fā)服務器至少會比 Webpack 快 10 倍左右。對于一個基本的項目來說，與 2.5 秒相比，開發(fā)構建/重新構建的時間相差 250ms。

在一個較大的項目中，這種差異會變得更加明顯。Webpack 開發(fā)服務器在構建/重新構建時可能會慢到 25-30 秒，有時甚至更慢。與此同時，Vite 開發(fā)服務器可能會以恒定的 250ms 的速度為同一個項目提供服務。

這顯然是開發(fā)經驗和游戲規(guī)則改變的差異，Vite 是如何做到這一點的？

Webpack 的工作方式是，它通過解析應用程序中的每一個 import 和 require ，將整個應用程序構建成一個基于 JavaScript 的捆綁包，并在運行時轉換文件（例如 Sass、TypeScript、SFC）。

這都是在服務器端完成的，依賴的數量和改變后構建/重新構建的時間之間有一個大致的線性關系。

Vite 不捆綁應用服務器端。相反，它依賴于瀏覽器對 JavaScript 模塊的原生支持（也就是 ES 模塊，是一個比較新的功能）。

瀏覽器將在需要時通過 HTTP 請求任何 JS 模塊，并在運行時進行處理。Vite 開發(fā)服務器將按需轉換任何文件（如 Sass、TypeScript、SFC）。

這種架構避免了服務器端對整個應用的捆綁，并利用瀏覽器高效的模塊處理，提供了一個明顯更快的開發(fā)服務器。

提示：當你對應用程序進行 code-split 和 tree-shake 動時，Vite 的速度會更快，因為它只加載它需要的模塊，即使是在開發(fā)階段。這與 Webpack 不同，在 Webpack 中，代碼拆分只對生產包有利。

你可能已經明白了，Vite 的主要特點是它的開發(fā)服務器快得離譜。

如果沒有這個功能，可能就不會再討論了，因為與 Vue CLI 相比，它確實沒有其他的功能，而且確實有一些缺點。

由于 Vite 使用了 JavaScript 模塊，所以最好讓依賴關系也使用 JavaScript 模塊。雖然大多數現(xiàn)代 JS 包都提供了這一點，但一些老的包可能只提供 CommonJS 模塊。

Vite 可以將 CommonJS 轉換為 JavaSript 模塊，但在一些邊緣情況下它可能無法做到。當然，它還需要支持 JavaScript 模塊的瀏覽器。

與 Webpack/Vue CLI 不同，Vite 無法創(chuàng)建針對舊版瀏覽器、web components 等的捆綁包。

而且，與 Vue CLI 不同，開發(fā)服務器和構建工具是不同的系統(tǒng)，導致在生產與開發(fā)中可能出現(xiàn)不一致的行為。