4.3 常用插件介紹
4.3.1 官方插件
@vitejs/plugin-vue
用于支持 Vue.js 開發：
npm install @vitejs/plugin-vue --save-dev
import vue from '@vitejs/plugin-vue'export default defineConfig({plugins: [vue()]
})
@vitejs/plugin-react
用于支持 React 開發：
npm install @vitejs/plugin-react --save-dev
import react from '@vitejs/plugin-react'export default defineConfig({plugins: [react()]
})
4.3.2 社區插件
vite-plugin-legacy
用于支持舊瀏覽器：
npm install @vitejs/plugin-legacy --save-dev
import legacy from '@vitejs/plugin-legacy'export default defineConfig({plugins: [legacy({targets: ['defaults', 'not IE 11']})]
})
vite-plugin-compression
用于壓縮輸出的資源文件：
npm install vite-plugin-compression --save-dev
import compression from 'vite-plugin-compression'export default defineConfig({plugins: [compression()]
})
4.3.3 插件組合
你可以將多個插件組合使用，以滿足不同的需求：
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import legacy from '@vitejs/plugin-legacy'
import compression from 'vite-plugin-compression'export default defineConfig({plugins: [vue(),legacy({targets: ['defaults', 'not IE 11']}),compression()]
})
4.4 創建自定義插件
Vite 的插件系統允許開發者根據需求創建自定義插件。以下是一個詳細的創建自定義插件的示例。
4.4.1 示例：日志插件
創建一個簡單的日志插件，記錄每個模塊的加載時間。
4.4.1.1 實現插件
// vite-plugin-logger.js
export default function loggerPlugin() {return {name: 'logger-plugin',async load(id) {const start = Date.now()const result = await this.load(id)const end = Date.now()console.log(`Module ${id} loaded in ${end - start}ms`)return result}}
}
4.4.1.2 配置插件
import { defineConfig } from 'vite'
import loggerPlugin from './vite-plugin-logger'export default defineConfig({plugins: [loggerPlugin()]
})
4.4.2 高級插件示例：SVG 圖標插件
這個插件將 SVG 文件作為 Vue 組件導入。
4.4.2.1 實現插件
// vite-plugin-svg.js
import { createFilter } from 'vite'export default function svgPlugin(options = {}) {const filter = createFilter(options.include || '**/*.svg', options.exclude)return {name: 'svg-plugin',transform(src, id) {if (!filter(id)) returnreturn `export default { template: \`${src}\` }`}}
}
4.4.2.2 配置插件
import { defineConfig } from 'vite'
import svgPlugin from './vite-plugin-svg'export default defineConfig({plugins: [svgPlugin()]
})
4.5 插件調試與優化
插件調試和優化是確保插件高效運行的關鍵。本節將介紹一些調試技巧和優化方法。
4.5.1 調試插件
4.5.1.1 使用 console.log
在插件中使用 console.log 打印調試信息。例如：
export default function loggerPlugin() {return {name: 'logger-plugin',async load(id) {console.log(`Loading module: ${id}`)const result = await this.load(id)console.log(`Module loaded: ${id}`)return result}}
}
4.5.1.2 使用斷點調試
在插件代碼中設置斷點，然后在 Vite 啟動時通過瀏覽器調試工具進行斷點調試。
4.5.2 優化插件性能
4.5.2.1 減少不必要的計算
確保插件只對需要處理的文件進行操作。例如，使用 createFilter 函數創建文件過濾器：
import { createFilter } from 'vite'export default function myPlugin() {const filter = createFilter('**/*.js', 'node_modules/**')return {name: 'my-plugin',transform(code, id) {if (!filter(id)) return// 插件邏輯}}
}
4.5.2.2 緩存計算結果
對于重復的計算結果，可以進行緩存以提高性能。例如：
const cache = new Map()export default function myPlugin() {return {name: 'my-plugin',transform(code, id) {if (cache.has(id)) {return cache.get(id)}const result = /* 插件邏輯 */cache.set(id, result)return result}}
}
)
