Vite打包优化

下载rollup-plugin-visualizer打包体积可视化面板

yarn add rollup-plugin-visualizer -D

//vite.config.ts
import { defineConfig } from 'vite'
import { visualizer } from 'rollup-plugin-visualizer';
export default defineConfig({
  plugins:[visualizer({open:true})]//配置打包后自动打开可视化面板
})

配置cdn方法

yarn add vite-plugin-cdn-import -D

一定要注意cdn版本号和当前项目依赖版本号是否一致

import { defineConfig } from 'vite'
import { Plugin as importToCDN } from "vite-plugin-cdn-import";
export default defineConfig({
  plugins:[importToCDN({
    modules: [
      {
        name: "vue",
        var: "Vue",
        path: "cdn-link"//cdn链接
      },
      {
        name: "vue-router",
        var: "VueRouter",
        path: "cdn-link"//cdn链接
      },
      {
        name: "axios",
        var: "Axios",
        path: "cdn-link"//cdn链接
      }
    ]
  })]
})

gzip静态资源压缩

yarn add vite-plugin-compression -D

import viteCompression from 'vite-plugin-compression'
//在plugins配置数组里添加gzip插件
 plugins: [viteCompression({
    verbose: true,
    disable: false,
    threshold: 10240,
    algorithm: 'gzip',
    ext: '.gz',
  })],

清除console和debugger

先安装yarn add -D terser 在build里面添加terse

build : {
    minify : 'terser' ,
    terserOptions : {
      compress : {
        drop_console : true ,
        drop_debugger : true ,
        } ,
    } , 
} ,