Vue3之vite打包優(yōu)化方式
更新時間：2025年04月25日 08:49:19 作者：夢凡塵
這篇文章主要介紹了Vue3之vite打包優(yōu)化方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
一、部分組件異步加載
按照vue官方文檔的介紹，對于某些優(yōu)先級比較低的組件可以使用異步加載的方式進行引入
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配置文件進行打包優(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：過濾器，對哪些類型的文件進行壓縮, 默認為 /.(js|mjs|json|css|html)$/iverbose：true; 是否在控制臺輸出壓縮結(jié)果，默認為truethreshold: 啟用壓縮的文件大小限制，單位是字節(jié)，默認為0disable:false; 是否禁用壓縮，默認為falsedeleteOriginFile: 壓縮后是否刪除原文件，默認為falsealgorithm: 采用的壓縮算法,默認是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)文章
項目在線上會遇到管理員類似權(quán)限比較大的用戶,會在同一瀏覽器登陸多個賬號,遇到這樣的問題如何處理呢,下面小編給大家介紹vue同一瀏覽器登錄多賬號處理方法,感興趣的朋友一起看看吧2024-01-01
vue props default Array或是Object的正確寫法說明
這篇文章主要介紹了vue props default Array或是Object的正確寫法說明，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
this.$set是Vue中的一個方法,用于在響應(yīng)式對象上設(shè)置新的屬性或修改已有的屬性,強制刷新并確保這些屬性也是響應(yīng)式的,這篇文章主要介紹了Vue中this.$set()使用方法的相關(guān)資料,需要的朋友可以參考下2025-09-09
這篇文章主要為大家介紹了Vue extends 屬性的用法示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
這篇文章主要介紹了淺談Vue頁面級緩存解決方案feb-alive(下),文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-04-04
使用Vue+ElementUI動態(tài)生成面包屑導(dǎo)航教程
Vue和ElementUI都是非常流行的前端開發(fā)框架,它們可以讓我們更加便捷地開發(fā)前端應(yīng)用,下面這篇文章主要給大家介紹了關(guān)于使用Vue+ElementUI動態(tài)生成面包屑導(dǎo)航的相關(guān)資料,需要的朋友可以參考下2023-05-05
這篇文章主要介紹了Vue實現(xiàn)商品飛入購物車效果(電商項目)，這種效果在一些電商平臺經(jīng)常會用到，今天小編通過代碼詳解,需要的朋友可以參考下2019-11-11
這篇文章主要給大家介紹了關(guān)于vue中插槽slot的理解和使用方法，文中通過示例代碼介紹的非常詳細，對大家學習或者使用vue具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2019-04-04
使用axios可以很方便地獲取后端返回的文件流數(shù)據(jù),并在前端直接在瀏覽器下載,這篇文章主要給大家介紹了關(guān)于前端處理axios請求下載后端返回的文件流的相關(guān)資料,需要的朋友可以參考下2024-07-07
這篇文章主要為大家介紹了Vue編譯器解析compile源碼解析示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09