亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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

參數：

  • filter：過濾器，對哪些類型的文件進行壓縮, 默認為 /.(js|mjs|json|css|html)$/i
  • verbose：true; 是否在控制臺輸出壓縮結果，默認為true
  • threshold: 啟用壓縮的文件大小限制，單位是字節(jié)，默認為0
  • disable:false; 是否禁用壓縮，默認為false
  • deleteOriginFile: 壓縮后是否刪除原文件，默認為false
  • algorithm: 采用的壓縮算法,默認是gzip
  • ext：生成的壓縮包后綴
//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 自動導入

簡單配置第三方組件按需導入

//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()],
    }),
  ],

總結

以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

相關文章

最新評論