Vite和Vue CLI的優(yōu)劣
Vue 生態(tài)系統(tǒng)中有一個(gè)名為 Vite 的新構(gòu)建工具，它的開(kāi)發(fā)服務(wù)器比 Vue CLI 快 10-100 倍。
這是否意味著 Vue CLI 已經(jīng)過(guò)時(shí)了?在本文中，我將比較這兩種構(gòu)建工具，并說(shuō)明它們的優(yōu)缺點(diǎn)，以便你可以決定哪一種適合你的下一個(gè)項(xiàng)目。
Vue CLI 概述
大多數(shù) Vue 開(kāi)發(fā)人員都知道，Vue CLI 是使用標(biāo)準(zhǔn)構(gòu)建工具和最佳實(shí)踐配置快速建立基于 Vue 的項(xiàng)目的不可或缺的工具。
其主要功能包括：
- 工程腳手架
- 帶熱模塊重載的開(kāi)發(fā)服務(wù)器
- 插件系統(tǒng)
- 用戶界面
在本討論中需要注意的是，Vue CLI 是構(gòu)建在 Webpack 之上的，因此開(kāi)發(fā)服務(wù)器和構(gòu)建功能和性能都將是 Webpack 的超集。
Vite 概述
與 Vue CLI 類似，Vite 也是一個(gè)提供基本項(xiàng)目腳手架和開(kāi)發(fā)服務(wù)器的構(gòu)建工具。
然而，Vite 并不是基于 Webpack 的，它有自己的開(kāi)發(fā)服務(wù)器，利用瀏覽器中的原生 ES 模塊。這種架構(gòu)使得 Vite 比 Webpack 的開(kāi)發(fā)服務(wù)器快了好幾個(gè)數(shù)量級(jí)。Vite 采用 Rollup 進(jìn)行構(gòu)建，速度也更快。
Vite 目前還處于測(cè)試階段，看來(lái) Vite 項(xiàng)目的目的并不是像 Vue CLI 那樣的一體化工具，而是專注于提供一個(gè)快速的開(kāi)發(fā)服務(wù)器和基本的構(gòu)建工具。
Vite 怎么這么快？
Vite 開(kāi)發(fā)服務(wù)器至少會(huì)比 Webpack 快 10 倍左右。對(duì)于一個(gè)基本的項(xiàng)目來(lái)說(shuō)，與 2.5 秒相比，開(kāi)發(fā)構(gòu)建/重新構(gòu)建的時(shí)間相差 250ms。
在一個(gè)較大的項(xiàng)目中，這種差異會(huì)變得更加明顯。Webpack 開(kāi)發(fā)服務(wù)器在構(gòu)建/重新構(gòu)建時(shí)可能會(huì)慢到 25-30 秒，有時(shí)甚至更慢。與此同時(shí)，Vite 開(kāi)發(fā)服務(wù)器可能會(huì)以恒定的 250ms 的速度為同一個(gè)項(xiàng)目提供服務(wù)。
這顯然是開(kāi)發(fā)經(jīng)驗(yàn)和游戲規(guī)則改變的差異，Vite 是如何做到這一點(diǎn)的？
Webpack 開(kāi)發(fā)服務(wù)器架構(gòu)
Webpack 的工作方式是，它通過(guò)解析應(yīng)用程序中的每一個(gè) import 和 require ，將整個(gè)應(yīng)用程序構(gòu)建成一個(gè)基于 JavaScript 的捆綁包，并在運(yùn)行時(shí)轉(zhuǎn)換文件（例如 Sass、TypeScript、SFC）。
這都是在服務(wù)器端完成的，依賴的數(shù)量和改變后構(gòu)建/重新構(gòu)建的時(shí)間之間有一個(gè)大致的線性關(guān)系。
Vite 開(kāi)發(fā)服務(wù)器架構(gòu)
Vite 不捆綁應(yīng)用服務(wù)器端。相反，它依賴于瀏覽器對(duì) JavaScript 模塊的原生支持（也就是 ES 模塊，是一個(gè)比較新的功能）。
瀏覽器將在需要時(shí)通過(guò) HTTP 請(qǐng)求任何 JS 模塊，并在運(yùn)行時(shí)進(jìn)行處理。Vite 開(kāi)發(fā)服務(wù)器將按需轉(zhuǎn)換任何文件（如 Sass、TypeScript、SFC）。
這種架構(gòu)避免了服務(wù)器端對(duì)整個(gè)應(yīng)用的捆綁，并利用瀏覽器高效的模塊處理，提供了一個(gè)明顯更快的開(kāi)發(fā)服務(wù)器。
提示：當(dāng)你對(duì)應(yīng)用程序進(jìn)行 code-split 和 tree-shake 動(dòng)時(shí)，Vite 的速度會(huì)更快，因?yàn)樗患虞d它需要的模塊，即使是在開(kāi)發(fā)階段。這與 Webpack 不同，在 Webpack 中，代碼拆分只對(duì)生產(chǎn)包有利。
Vite 的缺點(diǎn)
你可能已經(jīng)明白了，Vite 的主要特點(diǎn)是它的開(kāi)發(fā)服務(wù)器快得離譜。
如果沒(méi)有這個(gè)功能，可能就不會(huì)再討論了，因?yàn)榕c Vue CLI 相比，它確實(shí)沒(méi)有其他的功能，而且確實(shí)有一些缺點(diǎn)。
由于 Vite 使用了 JavaScript 模塊，所以最好讓依賴關(guān)系也使用 JavaScript 模塊。雖然大多數(shù)現(xiàn)代 JS 包都提供了這一點(diǎn)，但一些老的包可能只提供 CommonJS 模塊。
Vite 可以將 CommonJS 轉(zhuǎn)換為 JavaSript 模塊，但在一些邊緣情況下它可能無(wú)法做到。當(dāng)然，它還需要支持 JavaScript 模塊的瀏覽器。
與 Webpack/Vue CLI 不同，Vite 無(wú)法創(chuàng)建針對(duì)舊版瀏覽器、web components 等的捆綁包。
而且，與 Vue CLI 不同，開(kāi)發(fā)服務(wù)器和構(gòu)建工具是不同的系統(tǒng)，導(dǎo)致在生產(chǎn)與開(kāi)發(fā)中可能出現(xiàn)不一致的行為。
Vue CLI vs Vite 總結(jié)
| Vue CLI 優(yōu)點(diǎn) | Vue CLI 缺點(diǎn) |
|---|---|
| 經(jīng)歷過(guò)戰(zhàn)斗考驗(yàn)，可靠 | 開(kāi)發(fā)服務(wù)器速度與依賴數(shù)量成反比 |
| 與 Vue 2 兼容 | |
| 可以捆綁任何類型的依賴關(guān)系 | |
| 插件生態(tài)系統(tǒng) | |
| 可以針對(duì)不同的目標(biāo)進(jìn)行構(gòu)建 |
| Vite 優(yōu)點(diǎn) | Vite 缺點(diǎn) |
|---|---|
| 開(kāi)發(fā)服務(wù)器比 Webpack 快 10-100 倍 | 只能針對(duì)現(xiàn)代瀏覽器（ES2015+） |
| 將 code-splitting 作為優(yōu)先事項(xiàng) | 與 CommonJS 模塊不完全兼容 |
| 處于測(cè)試階段，僅支持 Vue 3 | |
| 最小的腳手架不包括 Vuex、路由器等 | |
| 不同的開(kāi)發(fā)服務(wù)器與構(gòu)建工具 |
Vite 的未來(lái)
雖然上面的比較主要集中在 Vite 和 Vue CLI 的現(xiàn)狀上，但仍有幾點(diǎn)需要考慮：
- 僅當(dāng)瀏覽器中的 JavaScript 模塊支持得到改善時(shí)，Vite 才會(huì)有所改善。
- 隨著 JS 生態(tài)系統(tǒng)的追趕，更多的軟件包將支持 JavaScript 模塊，減少 Vite 無(wú)法處理的邊緣情況。
- Vite 仍處于測(cè)試階段–功能可能會(huì)有變化。
- 有可能 Vue CLI 最終會(huì)結(jié)合 Vite，這樣你就不用再使用其中一個(gè)了。
值得注意的是，Vite 并不是唯一一個(gè)利用瀏覽器中 JavaScript 模塊的開(kāi)發(fā)服務(wù)器項(xiàng)目。還有更著名的Snowpack，甚至可能會(huì)擠掉 Vite 的發(fā)展。時(shí)間會(huì)證明這一點(diǎn)
以上就是Vite和Vue CLI的優(yōu)劣的詳細(xì)內(nèi)容，更多關(guān)于Vite和Vue CLI的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要介紹了關(guān)于vue中的rules表單驗(yàn)證(常用)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06
vue中使用better-scroll實(shí)現(xiàn)滑動(dòng)效果及注意事項(xiàng)
這篇文章主要介紹了vue中使用better-scroll實(shí)現(xiàn)滑動(dòng)效果，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-11-11
vue+element項(xiàng)目中過(guò)濾輸入框特殊字符小結(jié)
這篇文章主要介紹了vue+element項(xiàng)目中過(guò)濾輸入框特殊字符小結(jié)，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-08-08
vue響應(yīng)式原理與雙向數(shù)據(jù)的深入解析
Vue 最獨(dú)特的特性之一,是其非侵入性的響應(yīng)式系統(tǒng)。下面這篇文章主要給大家介紹了關(guān)于vue響應(yīng)式原理與雙向數(shù)據(jù)的相關(guān)資料,需要的朋友可以參考下2021-06-06
快速搭建vue2.0+boostrap項(xiàng)目的方法
這篇文章主要介紹了快速搭建vue2.0+boostrap項(xiàng)目的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-04-04
Vue3.x項(xiàng)目開(kāi)發(fā)的一些常用知識(shí)點(diǎn)總結(jié)
目前Vue3.0是會(huì)兼容大部分2.x的語(yǔ)法,下面這篇文章主要給大家介紹了關(guān)于Vue3.x項(xiàng)目開(kāi)發(fā)的一些常用知識(shí)點(diǎn),文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-05-05
關(guān)于Pinia狀態(tài)持久化問(wèn)題
這篇文章主要介紹了關(guān)于Pinia狀態(tài)持久化問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。2023-03-03
這篇文章主要介紹了基于element-UI input等組件寬度修改方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
基于Vue3和Plotly.js實(shí)現(xiàn)交互式3D圖
這篇文章主要介紹了基于Vue3和Plotly.js實(shí)現(xiàn)交互式3D圖,本代碼旨在為數(shù)據(jù)可視化提供一個(gè)交互式圖表,允許用戶動(dòng)態(tài)控制圖表中線條的顏色和可見(jiàn)性,此功能對(duì)于探索大型數(shù)據(jù)集或突出特定數(shù)據(jù)子集非常有用,需要的朋友可以參考下2024-07-07
vue實(shí)現(xiàn)折疊展開(kāi)收縮動(dòng)畫效果
這篇文章主要介紹了vue實(shí)現(xiàn)折疊展開(kāi)收縮動(dòng)畫,通過(guò)scrollHeight實(shí)現(xiàn),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友一起看看吧2023-11-11