建站
咨詢
售后
建站咨詢
新聞中心
相信大部分兄弟都體驗(yàn)過 Vite 了，知道它很快。但你知道它為什么快，相比 Webpack 有哪些不同嗎？今天咱們就來全面了解一下 Vite ，尤其適合新手兄弟。一起學(xué)起來吧！
成都創(chuàng)新互聯(lián)公司專業(yè)為企業(yè)提供廣南網(wǎng)站建設(shè)、廣南做網(wǎng)站、廣南網(wǎng)站設(shè)計(jì)、廣南網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計(jì)與制作、廣南企業(yè)網(wǎng)站模板建站服務(wù)，十余年廣南做網(wǎng)站經(jīng)驗(yàn)，不只是建網(wǎng)站，更提供有價(jià)值的思路和整體網(wǎng)絡(luò)服務(wù)。
什么是構(gòu)建工具
很多人對(duì)構(gòu)建工具沒有什么概念，只知道是用來打包的。那么到底什么是構(gòu)建工具呢？
大家都知道瀏覽器只支持 Html、CSS、JavaScript，但一個(gè)企業(yè)級(jí)項(xiàng)目可能會(huì)用到各種各樣的前端技術(shù)，如 Less、Sass、TS、Vue組件、語法降級(jí)、體積優(yōu)化等，這時(shí)候我們就需要相應(yīng)的工具去處理這些內(nèi)容：
- 使用 less-loader/sass-loader處理 less / sass。
- 使用 tsc將 typescript 轉(zhuǎn)換為 javascript。
- 使用 vue-complier將 vue 組件模板轉(zhuǎn)換為 render 函數(shù)。
- 使用 babel將 es 的新語法轉(zhuǎn)換為舊版瀏覽器認(rèn)識(shí)的語法。
- 使用 uglifyjs將我們的代碼壓縮成體積更小的文件。
我們可以手動(dòng)把代碼挨個(gè)處理一遍，但這樣效率非常低，當(dāng)我們稍微修改一點(diǎn)代碼，這個(gè)流程又要重新走一遍，非常麻煩。有個(gè)神奇的東西，可以把以上工具集成到一起，整個(gè)流程交給它自動(dòng)處理。而且當(dāng)代碼發(fā)生變化時(shí)，自動(dòng)幫我們重新走一遍，這個(gè)東西就叫做構(gòu)建工具。當(dāng)然構(gòu)建工具做的事情遠(yuǎn)不止于此，比如：
- 模塊化開發(fā)支持：支持直接從 node_modules 里引入代碼。
- 提高項(xiàng)目性能：壓縮文件、代碼分割。
- 優(yōu)化開發(fā)體驗(yàn)：熱更新、跨域問題。
- ......
構(gòu)建工具減輕了我們的心智負(fù)擔(dān)，讓我們不用關(guān)心我們寫的代碼如何在瀏覽器運(yùn)行，只需要關(guān)心代碼怎么寫就可以了。市面上主流的構(gòu)建工具有 Webpack、Vite、esbuild、Rollup、Parcel，以及最近剛出的 turbopack ，但目前最流行的依然是 Webpack 和 Vite 。
Vite 相較于 Webpack 的優(yōu)勢(shì)
當(dāng)項(xiàng)目體積越來越龐大時(shí)，構(gòu)建工具需要處理的代碼量呈指數(shù)級(jí)增長(zhǎng)，包含數(shù)千個(gè)模塊的項(xiàng)目也是相當(dāng)普遍。類似 Webpack 的構(gòu)建工具就會(huì)遇到性能瓶頸：通常需要很長(zhǎng)時(shí)間，甚至幾分鐘項(xiàng)目才能啟動(dòng)起來。熱更新（HMR）也可能需幾秒，甚至十幾秒。不知道大家目前的項(xiàng)目怎么樣，反正我們公司稍微大一點(diǎn)的 Vue2 項(xiàng)目是真的慢，等的捉急。這種情況已經(jīng)很大程度影響到了我們的開發(fā)效率和幸福感。
Webpack 有沒有辦法進(jìn)行優(yōu)化呢？很難。Webpack 先遞歸分析各模塊依賴關(guān)系-構(gòu)建依賴圖譜，然后進(jìn)行打包，再啟動(dòng)本地服務(wù)器。而且 Webpack 支持多種模塊化規(guī)范，比如 CommonJS 、ES-Module ，一開始就要統(tǒng)一模塊化代碼，將所有的依賴全部處理一遍。整個(gè)流程如下圖：
即使使用按需加載，也有一系列工作需要做，所以 Webpack 基本沒有優(yōu)化空間。
那么 Vite 為什么能解決這個(gè)問題呢？
- 底層語言。Vite 使用 esbuild預(yù)構(gòu)建依賴。esbuild使用 Go 編寫，比用 JS 編寫的打包器預(yù)構(gòu)建依賴快 10-100 倍。
- 先啟動(dòng)服務(wù)器，再按需請(qǐng)求模塊并編譯。Vite 利用的是現(xiàn)代瀏覽器本身支持 ES-Module這個(gè)特性，直接向依賴的模塊發(fā)出請(qǐng)求。Vite 啟動(dòng)時(shí)不需要分析模塊之間的依賴關(guān)系，也不用打包，項(xiàng)目越大，優(yōu)勢(shì)越明顯。
這個(gè)是 Vite 的啟動(dòng)過程：
這樣大家應(yīng)該看得出來 Vite 為什么快了吧！
依賴預(yù)構(gòu)建
上面提到了依賴預(yù)構(gòu)建，可能很多兄弟對(duì)這個(gè)不太理解，這里我也來講一下?，F(xiàn)代瀏覽器已經(jīng)支持 ES-Module ，但導(dǎo)入模塊只能用相對(duì)路徑或絕對(duì)路徑，直接使用模塊名稱的方式是行不通的：
// main.js
// 假設(shè)我們已經(jīng)安裝了 lodash 模塊
import a from './a.js' // 支持
import b from '/b.js' // 支持
import _ from 'lodash' // 報(bào)錯(cuò)
依賴預(yù)構(gòu)建就可以很好的解決這個(gè)問題。Vite 首先會(huì)找到依賴的模塊，然后調(diào)用 esbuild，將 CommonJS 等其他規(guī)范的代碼轉(zhuǎn)換成 ES-Module 規(guī)范，然后把它放在 node_modules/.vite/deps 目錄下，接著再修改相應(yīng)的引入路徑。
由于瀏覽器是通過 HTTP 來請(qǐng)求模塊文件的，一旦模塊的依賴關(guān)系比較多的話，就會(huì)發(fā)起很多個(gè)網(wǎng)絡(luò)請(qǐng)求。例如，lodash-es 內(nèi)置模塊超過 600 個(gè)，它們之前相互導(dǎo)入。當(dāng)我們執(zhí)行以下代碼時(shí)，瀏覽器會(huì)同時(shí)發(fā)出 600 多個(gè) HTTP 請(qǐng)求！大量的請(qǐng)求造成網(wǎng)絡(luò)堵塞，導(dǎo)致頁面的加載非常的慢。
import { debounce } from 'lodash-es'這時(shí)候還得靠依賴預(yù)構(gòu)建，預(yù)構(gòu)建將 lodash-es 整體轉(zhuǎn)換為一個(gè)模塊，這樣我們就只需要發(fā)起一個(gè) HTTP 請(qǐng)求了！
總結(jié)一下，依賴預(yù)構(gòu)建為我們解決了以下三個(gè)頭痛的問題：
- 兼容其他規(guī)范。不同的第三方依賴包會(huì)有不同的導(dǎo)出格式（如 CommonJS規(guī)范）。
- 重寫導(dǎo)入路徑。例如 lodash或重寫為/node_modules/.vite/deps/lodash.js?v=fef37e66，以便瀏覽器能夠正確導(dǎo)入。
- 網(wǎng)絡(luò)性能優(yōu)化。Vite 會(huì)將內(nèi)部有眾多依賴關(guān)系的 ES-Module模塊轉(zhuǎn)換為一個(gè)模塊，提高頁面的加載性能。
對(duì)不同內(nèi)容的處理
學(xué)習(xí)一項(xiàng)技術(shù)，最好的方式是單獨(dú)使用它。拋開腳手架工具，Vite 使用起來也非常的簡(jiǎn)單，直接在項(xiàng)目中安裝 vite ，給個(gè)配置就可以了。當(dāng)然不給也可以，Vite 會(huì)使用內(nèi)置的默認(rèn)配置：
npm install vite -D
// vite.config.js
import { defineConfig } from 'vite'
export default defineConfig({
// ...
})
為了方便使用，可以在 package.json 添加啟動(dòng)和打包命令。
"scripts": {
"dev": "vite",
"build": "vite build"
}然后在根目錄下新建一個(gè) index.html，npm run dev 項(xiàng)目就跑起來了！
對(duì) CSS 的處理
「CSS Modules」
在不同模塊中定義相同類名，會(huì)導(dǎo)致樣式被覆蓋，這時(shí)候就要用到 CSS module 。以 .module.css 結(jié)尾的文件都會(huì)被認(rèn)為是一個(gè) CSS modules 文件。導(dǎo)入這樣的文件會(huì)返回一個(gè)相應(yīng)的對(duì)象：
/* example.module.css */
.red {
color: red;
}
// main.js
import example from './example.module.css'
console.log(example) // { red: '_red_te83z_1' }
document.getElementById('foo').className = example.red
「CSS 預(yù)處理器」
Vite 同時(shí)提供了對(duì) .scss，.sass，.less，.styl 和 .stylus 文件的內(nèi)置支持，僅需安裝相應(yīng)的預(yù)處理器就可以了：
# .less
npm install less -D
# .scss and .sass
npm install sass -D
# .styl and .stylus
npm install stylus -D
感覺這塊要比 Webpack 簡(jiǎn)單的多，Webpack 需要給不同類型的文件配置不同的 loader 去處理，而 Vite 內(nèi)部直接幫我們配置好了。如果使用的是 Vue 單文件組件，可以通過