性能优化

打包体积可视化面板

npm i rollup-plugin-visualizer -D

// vite.config.ts
// 插件
import { visualizer } from "rollup-plugin-visualizer"; // 打包体积可视化

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(), visualizer({ open: true })],
  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url)),
    },
  },
});

配置 build

export default defineConfig({
  build: {
    chunkSizeWarningLimit:2000, //打包超过2000时控制台提示
    cssCodeSplit:true,// css拆分
    sourcemap:false,// 不生成sourcemap
    minify: false, // flase 禁用最小化混淆， esbuild最快 terser体积最小
    assetsInlineLimit:4000,//图片小4000转base64
  },
})

CDN

---

vite-plugin-cdn-import

下载依赖

npm install vite-plugin-cdn-import --save-dev

注意：版本号很重要!

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// 插件
import { visualizer } from 'rollup-plugin-visualizer';
import importToCDN from 'vite-plugin-cdn-import'

export default defineConfig({
	plugins: [
		vue(), 
		visualizer({ open: true }),
		importToCDN({
		    modules: [
		      {
		        name:"vue",
		        var:"Vue",
		        path:"https://unpkg.com/vue@3.2.38"
		      },{
          		name: "vue-router",
          		var: "VueRouter",
          		path: "https://unpkg.com/vue-router@4.1.5",
        	},{
		        name:"element-plus",
		        var:"ElementPlus",
		        path:"https://unpkg.com/element-plus@2.1.9",
		        css:"https://unpkg.com/element-plus/dist/index.css"
		      }
		    ]
		})],
    build: {
    	chunkSizeWarningLimit:2000, //打包超过2000时控制台提示
    	cssCodeSplit:true,// css拆分
    	sourcemap:false,// 不生成sourcemap
    	minify: false, // flase 禁用最小化混淆， esbuild最快 terser体积最小
    	assetsInlineLimit:4000,//图片小4000转base64
  },
})