Vite 是由 Vue.js 的作者尤雨溪開(kāi)發(fā)的下一代前端構(gòu)建工具，它以其快速的冷啟動(dòng)、按需編譯和熱更新能力而受到廣泛關(guān)注。Vite 通過(guò)利用瀏覽器原生的 ES 模塊導(dǎo)入功能，提供了幾乎即時(shí)的開(kāi)發(fā)環(huán)境啟動(dòng)速度和高度優(yōu)化的開(kāi)發(fā)體驗(yàn)。
安裝 Vite
首先，確保你的系統(tǒng)中已安裝 Node.js（推薦使用 LTS 版本）。然后，通過(guò) npm 或 yarn 全局安裝 Vite：
npm install -g create-vite
# 或者使用 yarn
yarn global add create-vite
創(chuàng)建新項(xiàng)目
使用 create-vite 命令創(chuàng)建一個(gè)新的 Vite 項(xiàng)目。這里以創(chuàng)建一個(gè) Vue 項(xiàng)目為例：
create-vite my-vite-project --template vue
cd my-vite-project
這將初始化一個(gè)基于 Vue 3 的 Vite 項(xiàng)目。
開(kāi)發(fā)與運(yùn)行
在項(xiàng)目根目錄下，運(yùn)行以下命令啟動(dòng)開(kāi)發(fā)服務(wù)器：
npm run dev
# 或者使用 yarn
yarn dev
Vite 會(huì)立即啟動(dòng)一個(gè)本地開(kāi)發(fā)服務(wù)器，你可以在瀏覽器中訪問(wèn) http://localhost:5173 查看你的應(yīng)用。Vite 支持熱模塊替換（HMR），這意味著你在編輯代碼時(shí)，瀏覽器頁(yè)面會(huì)實(shí)時(shí)更新，無(wú)需刷新。
構(gòu)建生產(chǎn)版本
當(dāng)準(zhǔn)備部署應(yīng)用時(shí)，運(yùn)行以下命令構(gòu)建生產(chǎn)版本：
npm run build
# 或者使用 yarn
yarn build
這將生成一個(gè)優(yōu)化過(guò)的、可用于生產(chǎn)的靜態(tài)文件夾，通常位于 dist 目錄下。
Vite配置
// vite.config.js
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue'; // 假設(shè)我們使用Vue
import { resolve } from 'path';
// 環(huán)境變量
const env = process.env.NODE_ENV === 'production' ? 'prod' : 'dev';
export default defineConfig({
// 應(yīng)用的基礎(chǔ)路徑
base: '/my-app/',
// 項(xiàng)目入口文件
root: './src',
// 輸出目錄
outDir: 'dist',
mode: env,
envPrefix: 'VITE_', // 所有以VITE_開(kāi)頭的環(huán)境變量將被注入到import.meta.env中
envFile: `.env.${env}.local`, // 讀取對(duì)應(yīng)環(huán)境的.env文件
// 動(dòng)態(tài)導(dǎo)入polyfill
optimizeDeps: {
include: ['@vue/reactivity'], // 強(qiáng)制包含動(dòng)態(tài)導(dǎo)入的庫(kù)
},
// 服務(wù)器配置
server: {
// 服務(wù)器端口
port: 3000,
// 是否開(kāi)啟HTTPS
https: false,
// 開(kāi)啟熱模塊替換
hmr: true,
// 代理配置，用于API請(qǐng)求轉(zhuǎn)發(fā)
proxy: {
'/api': {
target: 'http://localhost:8000',
changeOrigin: true,
},
},
middlewareMode: true, // 開(kāi)啟中間件模式
before(app) {
app.use(async (ctx, next) => {
ctx.body = 'Hello, this is a custom middleware!';
await next();
});
},
},
// 構(gòu)建配置
build: {
// 生產(chǎn)環(huán)境是否壓縮代碼
minify: true,
// 輸出目錄
outDir: 'dist',
// 資源文件存放目錄
assetsDir: 'assets',
// chunk大小警告閾值
chunkSizeWarningLimit: 500,
rollupOptions: {
input: 'src/main.js',
output: {
manualChunks(id) {
if (id.startsWith('node_modules')) {
return id.toString().replace(/(\.[a-z]+)|[\\/]/g, '_');
}
},
},
},
},
// 預(yù)處理器配置，如CSS
css: {
// CSS模塊化
modules: {
generateScopedName: '[name]_[local]_[hash:base64:5]',
},
},
// 預(yù)覽環(huán)境配置
preview: {
port: 8080,
},
// 插件配置
plugins: [
// 可以在這里添加自定義或第三方插件
],
// 解析選項(xiàng)
resolve: {
extensions: ['.js', '.jsx', '.ts', '.tsx'],
// 別名配置
alias: {
'@': '/src',
},
},
// Esbuild配置，用于優(yōu)化構(gòu)建速度
esbuild: {
// 啟用/禁用esbuild的tree shaking
treeShaking: true,
jsxFactory: 'h',
jsxFragment: 'Fragment',
},
transpileDependencies: ['my-dep'], // 指定需要轉(zhuǎn)譯的依賴
// 額外的Rollup配置
rollupOptions: {
// 可以在這里添加Rollup的配置項(xiàng)
},
});
Vite 的核心特性
- 快速啟動(dòng)：Vite 利用瀏覽器的原生 ES 模塊支持，無(wú)需打包即可快速啟動(dòng)開(kāi)發(fā)服務(wù)器，顯著提升了啟動(dòng)速度。
- 按需編譯：在開(kāi)發(fā)模式下，Vite 只編譯你正在查看的模塊，大大加快了編輯-刷新的循環(huán)。
- 熱模塊替換（HMR）：Vite 提供了非?？焖俚?HMR 體驗(yàn)，幾乎做到了無(wú)縫的實(shí)時(shí)更新。
- 配置簡(jiǎn)單：Vite 的配置文件 vite.config.js 相較于 Webpack 更為簡(jiǎn)潔，降低了入門門檻。
- 兼容性良好：Vite 支持多種框架，包括 Vue、React、Preact、Svelte 等，并且可以輕松適配自定義配置。
- 插件系統(tǒng)：Vite 提供了強(qiáng)大的插件系統(tǒng)，允許開(kāi)發(fā)者擴(kuò)展其功能，滿足特定項(xiàng)目需求。
進(jìn)階探索
- 配置文件：雖然Vite的默認(rèn)配置已經(jīng)很強(qiáng)大，但你可以在 vite.config.js 中進(jìn)行更多定制，如配置代理、別名、CSS預(yù)處理器等。
- Vue DevTools：在開(kāi)發(fā)Vue應(yīng)用時(shí)，確保安裝并啟用Vue DevTools瀏覽器擴(kuò)展，以便更好地調(diào)試應(yīng)用狀態(tài)。
- TypeScript支持：如果項(xiàng)目中使用TypeScript，Vite已默認(rèn)支持，你只需在項(xiàng)目中包含.ts或.tsx文件即可。
- 優(yōu)化：學(xué)習(xí)如何利用Vite的內(nèi)置優(yōu)化選項(xiàng)和外部插件，進(jìn)一步提升應(yīng)用性能。
