vue 前端压缩优化

1. 配置文件vite.config.ts

//**关键1**
import viteCompression from 'vite-plugin-compression'
//**关键1**
export default defineConfig({
  base: "/issue/",
  plugins: [
    vue(),
    //**关键2 viteCompression 大于10KB进行压缩，在dist文件夹中可以看到带.gz后缀的文件
**
    viteCompression({
      threshold: 10*1024
    }),
 //**关键2**
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
    PurgeIcons({
      /* PurgeIcons Options */
    }),
  ],
  css: {
    //css预处理
    preprocessorOptions: {
      scss: {
        additionalData: '@import "./src/styles/tooltipWidth.scss";',
        charset: false,
      },
      less: {
        charset: false,
        additionalData: '@import "./src/styles/global.less";',
      },
    },
  },
 //**关键3**
  build: {
    minify: 'terser',
    terserOptions: {
        compress: {
            drop_console: true,  //打包时删除console
            drop_debugger: true, //打包时删除 debugger
            pure_funcs: ['console.log'],//指定只删除console.log，其他console开头的命令保留
        },
        output: {
            comments: true, // 去掉注释内容
        },
    },
  },
//**关键3**
  resolve: {
    alias: [
      {
        find: "@/",
        replacement: path.resolve(process.cwd(), "src") + "/",
      },
    ],
  },
  server: {
    // 是否自动打开浏览器
    open: true,
    // 服务器主机名，如果允许外部访问，可设置为"0.0.0.0"
    host: "0.0.0.0",
    // 服务器端口号
    port: 3000,
    middlewareMode: "html",
    // 代理
    proxy: {
     "/issue/apigateway": {
        target: `${base_url}`,
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/issue\/apigateway/, ""),
      },
      "/roadtest/apigateway": {
        target: `${base_url}`,
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/roadtest\/apigateway/, ""),
      },
      "/apigateway": {
        target: `${base_url}`,
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/apigateway/, ""),
      },
      '/gateway': {
        target: `${base_url}`,
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/gateway/, '')
      },
      "/api":  {
        target: `${base_url}`,
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ""),
      },
      "/local": {
        target:'http://1111.111.1:22034/',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/local/, ""),
      },
      
    },
  },
});

2. 先安装依赖库npm i vite-plugin-compression -D

3. server/index.js

const jsRex = /\.(js|css)$/
        if (jsRex.test(ctx.request.url)) {
            let filePath = path.join(__dirname, './dist'+ctx.request.url)
            if(fs.existsSync(filePath+'.gz')){
                ctx.set('Content-Encoding', 'gzip')
            }
            ctx.set('expires', new Date(Date.now() + 4 * 60 * 1000).toGMTString())
            ctx.set('cache-control', 'max-age=' + 60 * 60 * 4)
        }

加上面的代码，主要是为了判断当前请求的的js、css，是否有相应的gz后缀的文件，如果有的话，在头部加上content-encoding=gzip，会获取相应的gz文件，浏览器会自己解析压缩的文件，如果不存在gz，就走正常的请求