
import viteCompression from 'vite-plugin-compression'
export default defineConfig({
  plugins:[
    //在plugins配置数组里添加gzip插件
    viteCompression({
      verbose: true, // 默认即可
      disable: false, // 开启压缩(不禁用)，默认即可
      deleteOriginFile: false, // 删除源文件
      threshold: 5120, // 压缩前最小文件大小
      algorithm: 'gzip', // 压缩算法
      ext: '.gz' // 文件类型
    })
  ]
})

二、静态资源的打包处理（按分类存放相应的文件）

build中添加如下代码：


build: {
    rollupOptions: {
      output: {
        // 静态资源打包做处理
        chunkFileNames: 'static/js/[name]-[hash].js',
        entryFileNames: 'static/js/[name]-[hash].js',
        assetFileNames: 'static/[ext]/[name]-[hash].[ext]',
        manualChunks(id) {
        if (id.includes('node_modules')) {
            return id.toString().split('node_modules/')[1].split('/')[0].toString();
          }
        },
      }
    }
  }

三、大的静态资源拆分/代码分割

第一种：提高静态资源的容量大小


 
build: {
 chunkSizeWarningLimit: 1500,//加大
}

第二种：合并路由打包

build里的output设置内,添加以下代码


manualChunks: {
  // vue vue-router合并打包
  vue: ['vue', 'vue-router'],
  lodash: ['lodash'],
  // 两个文件合并成一个a文件
  helloWorld: ['src/components/a.vue','src/components/b.vue'],
}

第三种：最小拆分打包


// 插件打包做处理
manualChunks(id) {
  if (id.includes('node_modules')) {
    return id.toString().split('node_modules/')[1].split('/')[0].toString();
  }
  return;
}

四、组件按需导入

安装unplugin-vue-components插件：

npm i unplugin-vue-components -D

在vite.config.ts中引入并配置


import Components from 'unplugin-vue-components/vite'
// ui库解析器，也可以自定义，需要安装相关UI库，unplugin-vue-components/resolvers
// 提供了以下集中解析器，使用的时候，需要安装对应的UI库，这里以element为示例
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
 
export default defineConfig({
  plugins: [
    Components({
      dirs: ['src/components'], // 目标文件夹
      extensions: ['vue','jsx'], // 文件类型
      dts: 'src/components.d.ts', // 输出文件，里面都是一些import的组件键值对
      // ui库解析器，也可以自定义，需要安装相关UI库
      resolvers: [
        ElementPlusResolver(),
      ],
    })
  ]
})

五、清除console和debugger

安装 terser插件：

npm install  terser  -D

build里添加terserOptions的配置


// 打包环境移除console.log，debugger
terserOptions: {
  compress: {
    drop_console: true,
    drop_debugger: true
  }
},

六、图片资源压缩

安装 vite-plugin-imagemin插件：

npm i vite-plugin-imagemin -D

在vite.config.js里面配置


// 引入
import viteImagemin from 'vite-plugin-imagemin'
 
// 在plugins配置数组里添加
plugin: [
    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
          }
        ]
      }
    });
]

七、使用CDN加速

内容分发网络（Content Delivery Network，简称 CDN）就是让用户从最近的服务器请求资源，提升网络请求的响应速度。通常我们请求依赖模块使用 CDN ，而请求项目代码依然使用自己的服务器。安装插件 vite-plugin-cdn-import：

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

在vite.config.js里面配置


import { autoComplete, Plugin as importToCDN } from 'vite-plugin-cdn-import';
 
export default defineConfig({
  plugins: [
     importToCDN({
      // 需要 CDN 加速的模块
      modules: [
        // 支持自动导入
        autoComplete('axios'),
        {
          name: 'lodash',
          var: '_',
          path: `https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js`
        }
      ]
    })
  ]
})

八、安装打包分析插件

安装rollup-plugin-visualizer插件

npm i rollup-plugin-visualizer