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, // 超過10kb的文件才壓縮
algorithm: 'gzip', // 算法可選brotliCompress
ext: '.gz',
deleteOriginFile: false // 根據(jù)服務(wù)器配置決定是否刪除源文件
})
作用：預(yù)生成.gz文件，Nginx等服務(wù)器直接發(fā)送壓縮包
業(yè)務(wù)場(chǎng)景：
- 高并發(fā)場(chǎng)景建議開啟（需服務(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)資源分類：通過
viteStaticCopy分離高頻更新資源
業(yè)務(wù)場(chǎng)景：
- 圖片為主的展示型網(wǎng)站必須開啟
- 管理后臺(tá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：第三方依賴包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 // 生成類型聲明文件
})
5. 熱更新配置
export default {
server: {
hmr: {
overlay: true, // 顯示錯(cuò)誤覆蓋層
protocol: 'ws',
host: 'localhost',
port: 3000
},
watch: {
usePolling: true // Docker環(huán)境需要開啟
}
}
}
調(diào)試技巧：
- 開發(fā)環(huán)境禁用緩存：
server.headers設(shè)置Cache-Control: no-store - 跨設(shè)備開發(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
}
}
模式說明：
- 開發(fā)環(huán)境：完整sourcemap
- 生產(chǎn)環(huán)境：
hidden-source-map（僅生成.map文件不上傳） - 錯(cuò)誤監(jiān)控：接入Sentry時(shí)需開啟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ā)門戶網(wǎng)站
配置重點(diǎn)：
1. 開啟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. 開發(fā)環(huán)境優(yōu)化HMR速度
示例配置：
server: {
watch: {
ignored: ['!**/node_modules/your-package/**'] // 忽略無關(guān)模塊監(jiān)聽
}
}
場(chǎng)景3：移動(dòng)端H5應(yīng)用
配置重點(diǎn)：
1. 首屏資源內(nèi)聯(lián)（critical CSS）
2. 圖片格式優(yōu)先使用WebP
3. 開啟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)文章
vue項(xiàng)目中js-cookie的使用存儲(chǔ)token操作
這篇文章主要介紹了vue項(xiàng)目中js-cookie的使用存儲(chǔ)token操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-11-11
Vue后臺(tái)實(shí)現(xiàn)點(diǎn)擊圖片放大功能的示例代碼
這篇文章主要為大家詳細(xì)介紹了如何利用Vue實(shí)現(xiàn)點(diǎn)擊圖片放大功能，文中的示例代碼講解詳細(xì)，具有一定的借鑒價(jià)值，需要的可以參考一下2022-12-12
Ant Design Vue resetFields表單重置不生效問題及解決
這篇文章主要介紹了Ant Design Vue resetFields 表單重置不生效問題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-06-06
vue路由傳參接收以及傳參對(duì)象為對(duì)象時(shí)的問題及解決
這篇文章主要介紹了vue路由傳參接收以及傳參對(duì)象為對(duì)象時(shí)的問題及解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
Vue滑塊驗(yàn)證碼組件anji-captcha的使用案例詳解
滑塊驗(yàn)證是一種常見的人機(jī)識(shí)別方法，這篇文章主要介紹了Vue滑塊驗(yàn)證碼組件anji-captcha的使用,本文通過實(shí)例代碼圖文相結(jié)合給大家介紹的非常詳細(xì)，需要的朋友可以參考下2023-05-05
vue使用js-audio-recorder實(shí)現(xiàn)錄音功能
這篇文章主要為大家詳細(xì)介紹了vue如何使用js-audio-recorder實(shí)現(xiàn)錄音功能,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-12-12
一個(gè)Vue視頻媒體多段裁剪組件的實(shí)現(xiàn)示例
這篇文章主要介紹了一個(gè)Vue媒體多段裁剪組件的實(shí)現(xiàn)示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-08-08
詳解vuex持久化插件解決瀏覽器刷新數(shù)據(jù)消失問題
這篇文章主要介紹了詳解vuex持久化插件解決瀏覽器刷新數(shù)據(jù)消失問題，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-04-04
Vue2 監(jiān)聽屬性改變watch的實(shí)例代碼
今天小編就為大家分享一篇Vue2 監(jiān)聽屬性改變watch的實(shí)例代碼，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-08-08
element-ui動(dòng)態(tài)級(jí)聯(lián)選擇器回顯問題詳解(二十多行代碼搞定）
大家在使用element-ui的時(shí)候肯定會(huì)遇到這樣一個(gè)問題,就是在你使用級(jí)聯(lián)選擇器的回顯問題,下面這篇文章主要給大家介紹了關(guān)于element-ui動(dòng)態(tài)級(jí)聯(lián)選擇器回顯問題的相關(guān)資料,需要的朋友可以參考下2023-03-03