Vite 入門篇:學會它,一起提升開發幸福感!
theme: orange
本文為稀土掘金技術社區首發簽約文章,14天內禁止轉載,14天后未獲授權禁止轉載,侵權必究!
相信大部分兄弟都體驗過 Vite 了,知道它很快。但你知道它為什麼快,相比 Webpack 有哪些不同嗎?今天咱們就來全面瞭解一下 Vite ,尤其適合新手兄弟。話不多説,開整!
什麼是構建工具
很多人對構建工具沒有什麼概念,只知道是用來打包的。那麼到底什麼是構建工具呢?
大家都知道瀏覽器只支持 Html、CSS、JavaScript,但一個企業級項目可能會用到各種各樣的前端技術,如 Less、Sass、TS、Vue組件、語法降級、體積優化等,這時候我們就需要相應的工具去處理這些內容:
- 使用
less-loader
/sass-loader
處理 less / sass - 使用
tsc
將 typescript 轉換為 javascript - 使用
vue-complier
將 vue 組件模板轉換為 render 函數 - 使用
babel
將 es 的新語法轉換為舊版瀏覽器認識的語法 - 使用
uglifyjs
將我們的代碼壓縮成體積更小的文件
我們可以手動把代碼挨個處理一遍,但這樣效率非常低,當我們稍微修改一點代碼,這個流程又要重新走一遍,非常麻煩。有個神奇的東西,可以把以上工具集成到一起,整個流程交給它自動處理。而且當代碼發生變化時,自動幫我們重新走一遍,這個東西就叫做構建工具。當然構建工具做的事情遠不止於此,比如:
- 模塊化開發支持:支持直接從 node_modules 裏引入代碼
- 提高項目性能:壓縮文件、代碼分割
- 優化開發體驗:熱更新、跨域問題
- ......
構建工具減輕了我們的心智負擔,讓我們不用關心我們寫的代碼如何在瀏覽器運行,只需要關心代碼怎麼寫就可以了。市面上主流的構建工具有 Webpack、Vite、esbuild、Rollup、Parcel,以及最近剛出的 turbopack ,但目前最流行的依然是 Webpack
和 Vite
。
Vite 相較於 Webpack 的優勢
當項目體積越來越龐大時,構建工具需要處理的代碼量呈指數級增長,包含數千個模塊的項目也是相當普遍。類似 Webpack 的構建工具就會遇到性能瓶頸:通常需要很長時間,甚至幾分鐘項目才能啟動起來。熱更新(HMR)也可能需幾秒,甚至十幾秒。不知道大家目前的項目怎麼樣,反正我們公司稍微大一點的 Vue2 項目是真的慢,等的捉急。這種情況已經很大程度影響到了我們的開發效率和幸福感。
Webpack 有沒有辦法進行優化呢?很難。Webpack 先遞歸分析各模塊依賴關係-構建依賴圖譜,然後進行打包,再啟動本地服務器。而且 Webpack 支持多種模塊化規範,比如 CommonJS
、ES-Module
,一開始就要統一模塊化代碼,將所有的依賴全部處理一遍。整個流程如下圖:
即使使用按需加載,也有一系列工作需要做,所以 Webpack 基本沒有優化空間。
那麼 Vite 為什麼能解決這個問題呢?
- 底層語言。Vite 使用
esbuild
預構建依賴。esbuild
使用 Go 編寫,比用 JS 編寫的打包器預構建依賴快 10-100 倍。 - 先啟動服務器,再按需請求模塊並編譯。Vite 利用的是現代瀏覽器本身支持
ES-Module
這個特性,直接向依賴的模塊發出請求。Vite 啟動時不需要分析模塊之間的依賴關係,也不用打包,項目越大,優勢越明顯。
這個是 Vite 的啟動過程:
這樣大家應該看得出來 Vite 為什麼快了吧!
依賴預構建
上面提到了依賴預構建,可能很多兄弟對這個不太理解,這裏我也來講一下。現代瀏覽器已經支持 ES-Module
,但導入模塊只能用相對路徑或絕對路徑,直接使用模塊名稱的方式是行不通的:
js
// main.js
// 假設我們已經安裝了 lodash 模塊
import a from './a.js' // 支持
import b from '/b.js' // 支持
import _ from 'lodash' // 報錯
依賴預構建就可以很好的解決這個問題。Vite 首先會找到依賴的模塊,然後調用 esbuild
,將 CommonJS
等其他規範的代碼轉換成 ES-Module
規範,然後把它放在 node_modules/.vite/deps
目錄下,接着再修改相應的引入路徑。
由於瀏覽器是通過 HTTP 來請求模塊文件的,一旦模塊的依賴關係比較多的話,就會發起很多個網絡請求。例如,lodash-es
內置模塊超過 600 個,它們之前相互導入。當我們執行以下代碼時,瀏覽器會同時發出 600 多個 HTTP 請求!大量的請求造成網絡堵塞,導致頁面的加載非常的慢。
js
import { debounce } from 'lodash-es'
這時候還得靠依賴預構建,預構建將 lodash-es
整體轉換為一個模塊,這樣我們就只需要發起一個 HTTP 請求了!
總結一下,依賴預構建為我們解決了以下三個頭痛的問題:
1. 兼容其他規範。不同的第三方依賴包會有不同的導出格式(如 CommonJS
規範)。
2. 重寫導入路徑。例如 lodash
或重寫為 /node_modules/.vite/deps/lodash.js?v=fef37e66
,以便瀏覽器能夠正確導入。
3. 網絡性能優化。Vite 會將內部有眾多依賴關係的 ES-Module
模塊轉換為一個模塊,提高頁面的加載性能。
對不同內容的處理
學習一項技術,最好的方式是單獨使用它。拋開腳手架工具,Vite 使用起來也非常的簡單,直接在項目中安裝 vite
,給個配置就可以了。當然不給也可以,Vite 會使用內置的默認配置:
js
npm install vite -D
```js // vite.config.js import { defineConfig } from 'vite'
export default defineConfig({ // ... }) ``` 為了方便使用,可以在 package.json 添加啟動和打包命令。
js
"scripts": {
"dev": "vite",
"build": "vite build"
},
然後在根目錄下新建一個 index.html
,npm run dev
項目就跑起來了!
對 CSS 的處理
CSS Modules
在不同模塊中定義相同類名,會導致樣式被覆蓋,這時候就要用到 CSS module
。以 .module.css
結尾的文件都會被認為是一個 CSS modules 文件
。導入這樣的文件會返回一個相應的對象:
js
/* example.module.css */
.red {
color: red;
}
js
// main.js
import example from './example.module.css'
console.log(example) // { red: '_red_te83z_1' }
document.getElementById('foo').className = example.red
CSS 預處理器
Vite 同時提供了對 .scss
,.sass
,.less
,.styl
和 .stylus
文件的內置支持,僅需安裝相應的預處理器就可以了:
```
.less
npm install less -D
.scss and .sass
npm install sass -D
.styl and .stylus
npm install stylus -D
``
感覺這塊要比 Webpack 簡單的多,Webpack 需要給不同類型的文件配置不同的
loader去處理,而 Vite 內部直接幫我們配置好了。如果使用的是 Vue 單文件組件,可以通過
- Vite 性能篇:掌握這些優化策略,一起縱享絲滑!
- Vite 配置篇:日常開發掌握這些配置就夠了!
- Vite 入門篇:學會它,一起提升開發幸福感!
- 還有人沒嘗過 Pinia 嗎,請收下這份食用指南!
- 10個常見的使用場景,助你從 Vue2 絲滑過渡到 Vue3 !
- 前端手寫功能第二彈,提升內力,等待下一次爆發!
- 效率提升之 —— 如何優雅的帶走上份工作的VSCode配置
- Vue組件遞歸——組件化開發的必備技能!
- 10個常用的JS工具庫,80%的項目都在用!
- 如何嚴格判斷文件上傳類型?再不會你就out啦!
- Element-UI 奇淫技巧第二彈!提升開發效率,延長摸魚時間~
- 原來虛擬列表如此簡單!萬萬沒想到
- 10個常見的前端手寫功能,你全都會嗎?
- 一款強大到沒朋友的圖片編輯插件,愛了愛了!
- 如何實現拖拽上傳、上傳進度條,以及取消上傳?
- Vue 1分鐘實現右鍵菜單,懶人的福音!
- Vue 如何快速實現頭像裁剪?方法比你想象的簡單
- 前端持久化之瀏覽器存儲技術(localStorage、sessionStorage 、session、cookies)