vite 优化配置

下面介绍的只是我自己用到的，还有更过的插件参考官网:cn.vitejs.dev/plugins/

分包与treeshaking

//分包看vite.config.js  manualChunks
  build: {
    rollupOptions:{
      output: {
        manualChunks: id =>{
          if (id.includes('node_modules')) {
            return 'vendor';
          }
        }
      }
    }
  }

gzip 压缩

npm i vite-plugin-compression

//vite.config.js
// plugins: [viteCompression()]

cdn 加速

npm i vite-plugin-cdn-import -D

//vite.config.js
 plugins: [
    viteCDNPlugin({
      // 需要 CDN 加速的模块
      modules: [
        {
          name: 'lodash',
          var: '_',
          path: `https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js`
        }
      ]
    })
  ]

图片压缩

npm i vite-plugin-imagemin -D

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

构建分析

npm install rollup-plugin-visualizer -D

// vite.config.js
import { defineConfig } from 'vite'
import { visualizer } from 'rollup-plugin-visualizer';

export default defineConfig({
  plugins: [
    // 将 visualizer 插件放到最后
    visualizer()
  ]
})
//npm run build ，构建成功之后会在根目录下生成一个 stats.html ，打开页面即可以看到分析结果。

过滤console.log

// 代码压缩+剔除console+debugger
// **esbuild **or **terser，**默认启动的是 esbuild， esbuild，比 terser 快 20-40倍，压缩率只差 1%-2%。
//esbuild：
import {defineConfig} from "vite";
export default defineConfig({
    esbuild:{
        drop: ['console,'debugger'], // 删除 所有的console 和 debugger
    }
})

//terser:
//vite 4.X 版本已经不集成 terser，需要自行下载
npm i -D terser

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

优化配置

// 下面都是默认状态，可以不写
// vite config.js
  build:{
    // 是否拆分css,
    cssCodeSplit:true,
    // 不生成sourcemap
    sourcemap:false,
    // minify: 两种模式 1. terser打包体积最小  2. esbuild打包速度快
    minify:"esbuild",
    // assetsInlineLimit:4000 意思是如果小于4000 就将它编译为base64的文件
    assetsInlineLimit:4096
  },