Vue3之vite打包優(yōu)化方式
更新時間：2025年04月25日 08:49:19 作者：夢凡塵
這篇文章主要介紹了Vue3之vite打包優(yōu)化方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
一、部分組件異步加載
按照vue官方文檔的介紹，對于某些優(yōu)先級比較低的組件可以使用異步加載的方式進(jìn)行引入
import {defineAsyncComponent} from "vue"
const MyDiagram = defineAsyncComponent(()=>import("./components/myDiagram.vue"))二、視圖分析優(yōu)化打包資源
1，下載插件
yarn add --dev rollup-plugin-visualizer
2，配置插件
//vite.config.js
import {visualizer} from "rollup-plugin-visualizer"
export default defineConfig({
plugins:[
visualizer({
emitFile:false,
file:"states.html",
open:true
})
]
})3，執(zhí)行打包命令，分析生成的視圖分析頁面
三、更改vite配置文件進(jìn)行打包優(yōu)化
1，依賴分包
//vite.config.js
build:{
rollupOptions:{
output:{ //靜態(tài)資源分類打包
chunkFileNames: 'static/js/[name]-[hash].js',
entryFileNames: 'static/js/[name]-[hash].js',
assetFileNames: 'static/[ext]/[name]-[hash].[ext]',
manualChunks(id){ //靜態(tài)資源拆分打包
if (id.includes('node_modules')) {
return id.toString().split('node_modules/')[1].split('/')[0].toString(); }
}
}
}
}2，開啟Gzip
它的主要作用就是縮小打包體積
安裝插件 yarn add vite-plugin-compression -D
參數(shù)：
filter：過濾器，對哪些類型的文件進(jìn)行壓縮, 默認(rèn)為 /.(js|mjs|json|css|html)$/iverbose：true; 是否在控制臺輸出壓縮結(jié)果，默認(rèn)為truethreshold: 啟用壓縮的文件大小限制，單位是字節(jié)，默認(rèn)為0disable:false; 是否禁用壓縮，默認(rèn)為falsedeleteOriginFile: 壓縮后是否刪除原文件，默認(rèn)為falsealgorithm: 采用的壓縮算法,默認(rèn)是gzipext：生成的壓縮包后綴
//vite.config.js
import viteCompression from "vite-plugin-compression";
plugins:[
viteCompression({
verbose: true,
disable: false,
threshold: 10240,
algorithm: 'gzip',
ext: '.gz',
})
]3，第三方組件庫按需加載
安裝插件 unplugin-vue-components 和 unplugin-auto-import
yarn add unplugin-auto-import -D yarn add unplugin-vue-components -D
其中 unplugin-vue-components 主要配置第三方組件按需加載
unplugin-auto-import 主要配置第三方aip 自動導(dǎo)入
簡單配置第三方組件按需導(dǎo)入
//vite.config.js
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { AntDesignVueResolver,ElementPlusResolver} from 'unplugin-vue-components/resolvers'
export default defineConfig {
plugins: [
// ...
AutoImport({
resolvers: [AntDesignVueResolver(),ElementPlusResolver()],
}),
Components({
resolvers: [AntDesignVueResolver(),ElementPlusResolver()],
}),
],總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue中引用阿里字體圖標(biāo)出現(xiàn)錯誤問題的解決方法，感興趣的朋友跟隨腳本之家小編一起學(xué)習(xí)吧2018-02-02
這篇文章主要為大家詳細(xì)介紹了Vue自定義可以選擇日期區(qū)間段的日歷插件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
uniapp?APP中內(nèi)嵌webview的H5與APP相互通訊動態(tài)傳參代碼示例
最近外部公司的app要接入我司的uni H5項目,所以這篇文章主要給大家介紹了關(guān)于uniapp?APP中內(nèi)嵌webview的H5與APP相互通訊動態(tài)傳參的相關(guān)資料,需要的朋友可以參考下2024-04-04
vue-treeselect(適配Vue3.2)及Element-plus的TreeSelect組件使用
這篇文章主要介紹了vue-treeselect(適配Vue3.2)及Element-plus的TreeSelect組件使用,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-05-05
在Vue中,使用EventBus可以實現(xiàn)組件間的通信,如何使用EventBus？?都需要做哪些配置呢？他的注意事項是什么呢？下面就跟隨小編一起學(xué)習(xí)一下吧2024-02-02
vue+elementUI動態(tài)增加表單項并添加驗證的代碼詳解
這篇文章主要介紹了vue+elementUI動態(tài)增加表單項并添加驗證的代碼，本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-12-12
最近正在使用Pinia進(jìn)行狀態(tài)管理,我希望在重新刷新頁面時保持狀態(tài),下面這篇文章主要給大家介紹了關(guān)于Pinia簡單使用以及數(shù)據(jù)持久化的相關(guān)資料,需要的朋友可以參考下2022-05-05
在最近新起的項目中,用到了較新的技術(shù)棧vue3.2+vite+ts,跟著網(wǎng)上的寫法漸漸上手了,下面這篇文章主要給大家介紹了關(guān)于vue3如何加載本地圖片等靜態(tài)資源的相關(guān)資料,需要的朋友可以參考下2023-04-04
vue動態(tài)生成新表單并且添加驗證校驗規(guī)則方式
這篇文章主要介紹了vue動態(tài)生成新表單并且添加驗證校驗規(guī)則方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了Vue項目部署到IIS后，刷新報錯404,這里需要用到URL重寫工具?--URL?Rewrite，需要的話需要自己下載安裝，本文通過圖文并茂的形式給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-10-10