Vue3+Vite4項(xiàng)目進(jìn)行性能優(yōu)化的配置方案
更新時(shí)間：2025年04月21日 10:20:38 作者：ak啊
這篇文章主要為大家詳細(xì)介紹了Vue3如何結(jié)合Vite4對(duì)項(xiàng)目進(jìn)行性能優(yōu)化的相關(guān)配置,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
一、基礎(chǔ)性能優(yōu)化配置（vite.config.ts）
1. Gzip 壓縮加速
import viteCompression from 'vite-plugin-compression';
// plugins 數(shù)組中添加
viteCompression({
verbose: true, // 顯示壓縮日志
threshold: 10240, // 超過(guò)10kb的文件才壓縮
algorithm: 'gzip', // 算法可選brotliCompress
ext: '.gz',
deleteOriginFile: false // 根據(jù)服務(wù)器配置決定是否刪除源文件
})
作用：預(yù)生成.gz文件，Nginx等服務(wù)器直接發(fā)送壓縮包
業(yè)務(wù)場(chǎng)景：
- 高并發(fā)場(chǎng)景建議開(kāi)啟（需服務(wù)器配合）
- 靜態(tài)資源托管CDN時(shí)建議刪除源文件（
deleteOriginFile: true）
2. 資源壓縮優(yōu)化
import { viteStaticCopy } from 'vite-plugin-static-copy';
// 圖片壓縮（需安裝 vite-plugin-imagemin）
import viteImagemin from 'vite-plugin-imagemin';
export default {
plugins: [
viteImagemin({
gifsicle: { optimizationLevel: 7 },
optipng: { optimizationLevel: 7 },
mozjpeg: { quality: 65 },
pngquant: { quality: [0.65, 0.9] },
svgo: {
plugins: [{ name: 'removeViewBox' }, { name: 'cleanupIDs' }]
}
}),
// 靜態(tài)資源復(fù)制插件
viteStaticCopy({
targets: [
{ src: 'public/static-assets', dest: 'assets' }
]
})
]
}
作用：
- 圖片壓縮：降低圖片體積（適合中大型圖片資源項(xiàng)目）
- 靜態(tài)資源分類(lèi)：通過(guò)
viteStaticCopy分離高頻更新資源
業(yè)務(wù)場(chǎng)景：
- 圖片為主的展示型網(wǎng)站必須開(kāi)啟
- 管理后臺(tái)類(lèi)項(xiàng)目可酌情降低壓縮率（
quality: 75）
3. 分包策略
export default {
build: {
rollupOptions: {
output: {
manualChunks: (id) => {
if (id.includes('node_modules')) {
if (id.includes('vue')) return 'vue-core';
if (id.includes('lodash')) return 'lodash';
return 'vendor';
}
if (id.includes('src/components')) return 'components';
},
chunkFileNames: 'js/[name]-[hash].js'
}
}
}
}
分包規(guī)則：
vue-core：Vue核心庫(kù)單獨(dú)分包vendor：第三方依賴(lài)包components：業(yè)務(wù)組件獨(dú)立分包
業(yè)務(wù)場(chǎng)景：
- 多入口應(yīng)用：按路由入口分包
- 組件庫(kù)項(xiàng)目：按功能模塊分包
4. 按需加載
// 路由配置示例
const routes = [
{
path: '/dashboard',
component: () => import(/* webpackChunkName: "dashboard" */ '@/views/Dashboard.vue')
}
]
實(shí)現(xiàn)方式：
路由級(jí)：動(dòng)態(tài)import()語(yǔ)法
組件級(jí)：defineAsyncComponent
UI庫(kù)按需加載（以Element Plus為例）：
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
Components({
resolvers: [ElementPlusResolver()],
dts: true // 生成類(lèi)型聲明文件
})
5. 熱更新配置
export default {
server: {
hmr: {
overlay: true, // 顯示錯(cuò)誤覆蓋層
protocol: 'ws',
host: 'localhost',
port: 3000
},
watch: {
usePolling: true // Docker環(huán)境需要開(kāi)啟
}
}
}
調(diào)試技巧：
- 開(kāi)發(fā)環(huán)境禁用緩存：
server.headers設(shè)置Cache-Control: no-store - 跨設(shè)備開(kāi)發(fā)：設(shè)置
host: '0.0.0.0'
6. 路徑別名配置
import path from 'path';
export default {
resolve: {
alias: {
'@': path.resolve(__dirname, './src'),
'#': path.resolve(__dirname, './types')
}
}
}
配套設(shè)置：
// tsconfig.json
{
"compilerOptions": {
"paths": {
"@/*": ["./src/*"],
"#/*": ["./types/*"]
}
}
}
7. Sourcemap 策略
export default {
build: {
sourcemap: process.env.NODE_ENV === 'production' ? 'hidden' : true
}
}
模式說(shuō)明：
- 開(kāi)發(fā)環(huán)境：完整sourcemap
- 生產(chǎn)環(huán)境：
hidden-source-map（僅生成.map文件不上傳） - 錯(cuò)誤監(jiān)控：接入Sentry時(shí)需開(kāi)啟sourcemap上傳
二、進(jìn)階優(yōu)化方案
1. CDN 加速
import { createHtmlPlugin } from 'vite-plugin-html';
export default {
plugins: [
createHtmlPlugin({
inject: {
data: {
cdnVue: '<script src="https://cdn.jsdelivr.net/npm/vue@3"></script>'
}
}
})
],
build: {
rollupOptions: {
external: ['vue', 'vue-router'],
output: {
globals: {
vue: 'Vue',
'vue-router': 'VueRouter'
}
}
}
}
}
2. 預(yù)加載優(yōu)化
// vite.config.ts
export default {
build: {
rollupOptions: {
output: {
manualChunks: {
// ...其他配置
},
assetFileNames: 'assets/[ext]/[name]-[hash][extname]'
}
}
}
}
// index.html 添加預(yù)加載
<link rel="preload" href="/assets/fonts/iconfont.woff2" rel="external nofollow" as="font" type="font/woff2" crossorigin>
三、業(yè)務(wù)場(chǎng)景配置策略
場(chǎng)景1：高并發(fā)門(mén)戶(hù)網(wǎng)站
配置重點(diǎn)：
1. 開(kāi)啟Gzip + Brotli雙重壓縮
2. 所有靜態(tài)資源上傳CDN
3. 使用HTTP2服務(wù)器推送
4. 配置強(qiáng)緩存策略（Cache-Control: public, max-age=31536000）
示例配置：
build: {
assetsInlineLimit: 4096, // 4kb以下資源轉(zhuǎn)base64
}
場(chǎng)景2：后臺(tái)管理系統(tǒng)
配置重點(diǎn)：
1. 按功能模塊分包
2. 保留詳細(xì)sourcemap便于調(diào)試
3. 開(kāi)發(fā)環(huán)境優(yōu)化HMR速度
示例配置：
server: {
watch: {
ignored: ['!**/node_modules/your-package/**'] // 忽略無(wú)關(guān)模塊監(jiān)聽(tīng)
}
}
場(chǎng)景3：移動(dòng)端H5應(yīng)用
配置重點(diǎn)：
1. 首屏資源內(nèi)聯(lián)（critical CSS）
2. 圖片格式優(yōu)先使用WebP
3. 開(kāi)啟SSR或預(yù)渲染
示例配置：
css: {
postcss: {
plugins: [
require('postcss-critical-css')({
outputPath: 'critical'
})
]
}
}
四、調(diào)試與分析工具
打包分析：
npm install rollup-plugin-visualizer -D
// vite.config.ts
import { visualizer } from 'rollup-plugin-visualizer';
plugins: [visualizer({ open: true })]
性能檢測(cè)：
// main.ts
import { performance } from 'perf_hooks';
if (import.meta.env.DEV) {
performance.mark('app-start');
}
五、注意事項(xiàng)
壓縮兼容性：
- 確保服務(wù)器正確配置
Content-Encoding響應(yīng)頭 - 舊版瀏覽器需檢測(cè)是否支持Brotli
緩存策略：
- 修改文件名哈希規(guī)則（
build.rollupOptions.output.[assetFileNames|entryFileNames]） - 使用
manifest.json管理版本號(hào)
安全優(yōu)化：
- 生產(chǎn)環(huán)境禁用sourcemap
- 設(shè)置
build.minify: 'terser'并配置混淆參數(shù)
到此這篇關(guān)于Vue3+Vite4項(xiàng)目進(jìn)行性能優(yōu)化的配置方案的文章就介紹到這了,更多相關(guān)Vue3 Vite4性能優(yōu)化內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vite vue3 路由配置@找不到文件的問(wèn)題及解決
在Vite項(xiàng)目中配置路由時(shí),可能會(huì)遇到文件路徑錯(cuò)誤導(dǎo)致的加載失敗問(wèn)題,常見(jiàn)的解決辦法包括安裝路徑處理插件、正確設(shè)置vite.config.js中的路徑別名以及重啟項(xiàng)目,通過(guò)正確配置,可以確保路由正確加載對(duì)應(yīng)的界面文件,避免路徑錯(cuò)誤導(dǎo)致的問(wèn)題2024-10-10
Vue+Node.js+WebSocket實(shí)現(xiàn)即時(shí)通訊
本文主要介紹了Vue+Node.js+WebSocket實(shí)現(xiàn)即時(shí)通訊，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05
vue watch深度監(jiān)聽(tīng)對(duì)象實(shí)現(xiàn)數(shù)據(jù)聯(lián)動(dòng)效果
這篇文章主要介紹了vue watch深度監(jiān)聽(tīng)對(duì)象實(shí)現(xiàn)數(shù)據(jù)聯(lián)動(dòng)的方法，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-08-08
elementPlus組件之表格編輯并校驗(yàn)功能實(shí)現(xiàn)
本文詳細(xì)介紹了如何使用Element Plus組件實(shí)現(xiàn)表格的單條數(shù)據(jù)新增、編輯、刪除操作,并對(duì)數(shù)據(jù)進(jìn)行校驗(yàn),代碼簡(jiǎn)單易懂,感興趣的朋友跟隨小編一起看看吧2024-12-12
這篇文章主要介紹了Vue中的table表單切換實(shí)現(xiàn)效果，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
vue3使用xgPalyer實(shí)現(xiàn)截圖功能的方法詳解
這篇文章主要為大家詳細(xì)介紹了如何在vue3中使用xgPalyer截圖功能,以及自定義插件,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-02-02
Vue編寫(xiě)可顯示周和月模式的日歷 Vue自定義日歷內(nèi)容的顯示
這篇文章主要為大家詳細(xì)介紹了Vue編寫(xiě)可顯示周和月模式的日歷，Vue自定義日歷內(nèi)容的顯示，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-06-06
Vue源碼學(xué)習(xí)之初始化模塊init.js解析
本篇文章主要介紹了Vue源碼學(xué)習(xí)之初始化模塊init.js解析，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-11-11
這篇文章主要介紹了vue在組件中使用v-model的場(chǎng)景，文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-07-07
這篇文章主要介紹了vue3中vue-meta的使用方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06