yarn add rollup-plugin-visualizer -D
npm i rollup-plugin-visualizer -D

import { visualizer } from 'rollup-plugin-visualizer';
export default defineConfig({
  plugins: [
  vue(), 
  visualizer({
    open: true, //在默認(rèn)用戶代理中打開生成的文件
    gzipSize: true, // 收集 gzip 大小并將其顯示
    brotliSize: true, // 收集 brotli 大小并將其顯示
    filename: "stats.html", // 分析圖生成的文件名
  }),
})

npm run build

export const constantRoute = [
	{
	    path: '/login',
	    component: () => import('@/views/login/index.vue'),
	    name: 'Login',
	    meta: {
	        title: '登錄', //菜單標(biāo)題
	        hidden: true, //代表路由標(biāo)題在菜單中是否隱藏  true:隱藏 false:不隱藏
	        icon: 'Promotion',
	    },
	},
	{
	    path: '/',
	    component: () => import('@/layout/index.vue'),
	    name: '/',
	    meta: {
	        title: '',
	        hidden: false,
	
	    },
	    redirect: '/home',
	    children: [{
	        path: '/home',
	        component: () => import('@/views/home/index.vue'),
	        meta: {
	            title: '項(xiàng)目總覽',
	            hidden: false,
	            icon: 'HomeFilled',
	        },
	    },],
	},
	{
	    path: '/user',
	    component: () => import('@/views/user/index.vue'),
	    name: 'User',
	    meta: {
	        title: '個(gè)人中心',
	        hidden: true,
	    },
	},
	{
	    path: '/404',
	    component: () => import('@/views/404/index.vue'),
	    name: '404',
	    meta: {
	        title: '找不到數(shù)據(jù)',
	        hidden: true,
	    },
	},
]

npm install vite-plugin-cdn-import -D
yarn add vite-plugin-cdn-import -D

import { defineConfig } from 'vite';
import compression from 'vite-plugin-compression';
export default defineConfig({
  // 其他配置項(xiàng)...
  plugins: [
    // 其他插件...
    // 第三方庫CDN引入
    importToCDN({
      prodUrl: "https://unpkg.com/{name}@{path}",
      modules: [
        autoComplete('vue'),
        autoComplete('axios'),
        {
          name: "vue-router",
          var: "VueRouter",
          path: "4.1.3",
        },
        {
          name: "element-plus",
          var: "ElementPlus",
          path: "2.2.14",
          css: "2.2.14/dist/index.css",
        },
        {
          name: "@element-plus/icons-vue",
          var: "ElementPlusIconsVue", // 根據(jù)main.js中定義的來
          path: "2.0.9",
        },
        {
          name: "pinia",
          var: "Pinia",
          path: "2.0.34",
        },
        {
          name: "lodash",
          var: "Lodash",
          path: "4.17.21",
        },
      ],
    }),
  ],
});

yarn add vite-plugin-compression -D
npm i vite-plugin-compression -D

import { defineConfig } from 'vite';
import compression from 'vite-plugin-compression';
export default defineConfig({
  // 其他配置項(xiàng)...
  plugins: [
    // 其他插件...
    compression({
      algorithm: "gzip", // 指定壓縮算法為gzip,[ 'gzip' , 'brotliCompress' ,'deflate' , 'deflateRaw']
      ext: ".gz", // 指定壓縮后的文件擴(kuò)展名為.gz
      threshold: 10240, // 僅對(duì)文件大小大于threshold的文件進(jìn)行壓縮，默認(rèn)為10KB
      deleteOriginFile: false, // 是否刪除原始文件，默認(rèn)為false
      filter: /\.(js|css|json|html|ico|svg)(\?.*)?$/i, // 匹配要壓縮的文件的正則表達(dá)式，默認(rèn)為匹配.js、.css、.json、.html、.ico和.svg文件
      compressionOptions: { level: 9 }, // 指定gzip壓縮級(jí)別，默認(rèn)為9（最高級(jí)別）
      verbose: true, //是否在控制臺(tái)輸出壓縮結(jié)果
      disable: false, //是否禁用插件
    }),
  ],
});

yarn add terser -D
npm i terser -D

import { defineConfig } from "vite";  
export default defineConfig({  
    build: {  
        minify: 'terser', // 啟用 terser 壓縮  
        terserOptions: {  
            compress: {  
                pure_funcs: ['console.log'], // 只刪除 console.log 
                //drop_console: true, // 刪除所有 console
                drop_debugger: true, // 刪除 debugger  
            }  
        }  
    }  
})  

// vite.config.js
import { defineConfig } from 'vite'

export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        manualChunks: id => {
          // 將 node_modules 中的代碼單獨(dú)打包成一個(gè) JS 文件
          if(id.includes('node_modules')) {
            return 'vendor'
          }
        }
      }
    }
  }
})

// vite.config.js
import { defineConfig } from 'vite'
import viteImagemin from 'vite-plugin-imagemin'

export default defineConfig({
  plugins: [
    viteImagemin({
      gifsicle: {
        optimizationLevel: 7,
        interlaced: false
      },
      optipng: {
        optimizationLevel: 7
      },
      mozjpeg: {
        quality: 20
      },
      pngquant: {
        quality: [0.8, 0.9],
        speed: 4
      },
      svgo: {
        plugins: [
          {
            name: 'removeViewBox'
          },
          {
            name: 'removeEmptyAttrs',
            active: false
          }
        ]
      }
    })
  ]
})

"resolutions": {
	"bin-wrapper": "npm:bin-wrapper-china"
}

199.232.4.133 raw.githubusercontent.com