1. 压缩代码和文件

通过 esbuild 进行代码压缩，再通过 vite-plugin-compression 生成压缩文件，可以显著减少应用的加载时间和带宽消耗。

a. 代码压缩 esuild

• 用途：主要用于代码压缩（minification）。
• 功能：esbuild 是一个快速的 JavaScript 和 TypeScript 打包工具，能够对代码进行压缩和优化。它可以移除多余的空格、注释、简化代码结构等，以减少文件大小。
• 集成：esbuild 可以直接集成到 Vite 的构建过程中，通过配置 minify 选项来启用代码压缩。

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [vue()],
  build: {
    minify: 'esbuild', // 使用 esbuild 进行代码压缩
    esbuildOptions: {
      minify: true,
      drop: ['console', 'debugger'], // 移除 console.log 和 debugger
    },
  },
});

b. 文件压缩 vite-plugin-compression

• 用途：主要用于文件压缩（compression）。
• 功能：vite-plugin-compression 是一个 Vite 插件，用于在构建过程中生成压缩文件（如 .gz 或 .br 文件）。这些压缩文件可以在部署时提供给服务器，以减少传输数据量，提高加载速度。
• 集成：vite-plugin-compression 作为 Vite 插件使用，通过配置插件选项来生成压缩文件。
• 压缩文件生成后，通常需要配置 HTTP 服务器（如 Nginx、Apache）以支持对压缩文件的自动响应。

Nginx 配置：

gzip on;
gzip_types text/plain application/javascript text/css;

• 当浏览器请求文件时，服务器会根据请求头中的 Accept-Encoding 字段（如 gzip 或 br）返回对应的压缩文件。

使用：npm install vite-plugin-compression --save-dev

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import viteCompression from 'vite-plugin-compression';

export default defineConfig({
  plugins: [
    vue(),
    viteCompression({
      verbose: true, // 是否在控制台输出压缩结果
      disable: false, // 是否禁用压缩
      threshold: 10240, // 只有大小大于该值的资源会被压缩，单位是字节
      algorithm: 'gzip', // 压缩算法，可选 'gzip'、'brotliCompress' 等
      ext: '.gz', // 生成的压缩文件后缀
    }),
  ],
});

压缩后的文件体积更小，传输到客户端的速度更快，从而提升页面加载性能。

2. 2.图片压缩

在 Vite 项目中，默认情况下，图片资源会被直接复制到输出目录（如 dist），而不会进行压缩。为了实现图片压缩，可以使用一些 Vite 插件来优化图片资源。

vite-plugin-imagemin 是一个专门用于压缩图片的 Vite 插件，支持多种图片格式（如 PNG、JPEG、GIF、SVG 等）。

a. 插件安装

npm install vite-plugin-imagemin -D

b. 使用

import { defineConfig } from 'vite';
import viteImagemin from 'vite-plugin-imagemin';

export default defineConfig({
  plugins: [
    viteImagemin({
      gifsicle: { // 压缩 GIF
        optimizationLevel: 7, // 优化级别
        interlaced: false, // 是否交错
      },
      optipng: { // 压缩 PNG
        optimizationLevel: 7, // 优化级别
      },
      mozjpeg: { // 压缩 JPEG
        quality: 20, // 压缩质量（0-100，数值越小压缩率越高）
      },
      pngquant: { // 另一种 PNG 压缩工具
        quality: [0.8, 0.9], // 压缩质量范围
      },
      svgo: { // 压缩 SVG
        plugins: [
          { name: 'removeViewBox' }, // 移除 viewBox
          { name: 'removeEmptyAttrs', active: false }, // 不移除空属性
        ],
      },
    }),
  ],
});

说明：

• 插件会根据配置对图片进行压缩，压缩后的图片会输出到 dist 目录。
• 支持多种图片格式的压缩工具：

• • gifsicle：压缩 GIF。
  • optipng：压缩 PNG。
  • mozjpeg：压缩 JPEG。
  • pngquant：另一种 PNG 压缩工具。
  • svgo：压缩 SVG。

3. 打包分析文件可视化

为了便捷观看打包后的资源消耗情况， rollup-plugin-visualizer 可以生成一个可视化的报告，帮助你了解打包后文件的体积分布，从而优化代码和依赖。在 Vite 中，由于 Vite 是基于 Rollup 的构建工具，因此可以直接使用 rollup-plugin-visualizer。

a. 安装：

npm install rollup-plugin-visualizer --save-dev

b. 使用：

import { defineConfig } from 'vite';
import { visualizer } from 'rollup-plugin-visualizer';

export default defineConfig({
  plugins: [
    visualizer({
      open: true, // 打包完成后自动打开报告
      filename: 'bundle-report.html', // 输出文件名
      title: 'Bundle Visualizer', // 报告标题
      template: 'treemap', // 图表类型，可选 'sunburst' | 'treemap' | 'network'
      gzipSize: true, // 显示 gzip 压缩后的大小
      brotliSize: true, // 显示 brotli 压缩后的大小
    }),
  ],
});