vite构建打包优化

    打包优化老生常谈的问题了，随着项目迭代，业务逻辑复杂度的提升代码越来越多，无论是webpack还是vite打包都会遇到打包文件太大从而导致首页加载缓慢，打包优化可从代码压缩，文件压缩 这两种方式着手，废话不多说，直接上代码......

代码压缩（打包时减少无效代码）

import {defineConfig} from "vite";
export default defineConfig({
    esbuild:{
       drop: ['console','debugger'], // 删除 所有的console 和 debugger
    }
})

文件压缩（vite-plugin-compression）

vite-plugin-compression是一个基于Vite的插件,用于gzip或Brotli压缩你的资源，从而减少页面的加载时间和网络带宽，提高用户访问速度和体验。

// 安装插件
npm install vite-plugin-compression -D

//vite.config.js 中配置插件
import { defineConfig } from 'vite'
import viteCompression from "vite-plugin-compression";

export default defineConfig({
  plugins: [
    viteCompression({
      verbose: true, // 默认即可
      disable: false, //开启压缩(不禁用)，默认即可
      deleteOriginFile: false, //删除源文件
      filter: /\.(js|mjs|json|css|html|ttf)$/I,
      threshold: 10240, //压缩前最小文件大小
      algorithm: "gzip", //压缩算法
      ext: ".gz", //文件类型
    }),
  ],
})

以上是简单的压缩配置，其实实际应用中可能会需要根据环境变量来灵活配置压缩，那么这时候可以将压缩配置单独抽离出来

根目录下创建vite文件夹 里面创建一个 viteGzip.js

//viteGzip.js
import compression from 'vite-plugin-compression'
//环境变量可灵活设置 
//VITE_BUILD_COMPRESS  各个.env文件中可配置 是否在打包时开启压缩，支持 gzip 和 brotli
export default function createCompression(env) {
    const { VITE_BUILD_COMPRESS,VITE_APP_ENV } = env
    const plugin = []
    if (VITE_BUILD_COMPRESS) {
        const compressList = VITE_BUILD_COMPRESS.split(',')
        if (compressList.includes('gzip')) {
            plugin.push(
                compression({
                    ext: '.gz',
                    deleteOriginFile: true // 源文件压缩后是否删除
                })
            )
        }
        if (compressList.includes('brotli')) {
            plugin.push(
                compression({
                    ext: '.br',
                    algorithm: 'brotliCompress',
                    deleteOriginFile: false
                })
            )
        }
    }
    return plugin
}

将上面的viteGzip.js 导入配置中

//vite.config.js
import { defineConfig, loadEnv } from 'vite'
import createCompression from './vite/viteGzip.js' //压缩配置
export default defineConfig(({ command,mode  }) => {
  const env = loadEnv(mode, process.cwd()) //获取环境变量
  return {
    plugins
      createCompression(env)
    ]
  }
})

这样之后打包就会看到 打包的静态文件多了.gz后缀的文件 说明压缩成功了

到这一步前端工作算完成了，后面还需要配置一下nginx开启解压缩静态文件

配置后重启nginx ，完成！！！