博客站

优化 Vite 的生产构建性能可以通过多种方式实现，以下是一些常用的优化策略和配置选项：

1. 代码分割

• 自动代码分割：Vite 默认支持自动代码分割，可以将代码拆分成多个小块，按需加载。
• 手动代码分割：通过 rollupOptions 配置手动代码分割。
• 示例：

  export default defineConfig({
    build: {
      rollupOptions: {
        output: {
          manualChunks: {
            vendor: ['lodash', 'axios'],
          },
        },
      },
    },
  });
  

2. 压缩代码

• 使用 Terser 或 esbuild 压缩：Vite 默认使用 esbuild 进行代码压缩，也可以配置使用 Terser。
• 示例：

  export default defineConfig({
    build: {
      minify: 'terser', // 或 'esbuild'
      terserOptions: {
        compress: {
          drop_console: true, // 移除 console.log
        },
      },
    },
  });
  

3. Tree Shaking

• 自动 Tree Shaking：Vite 默认启用 Tree Shaking，移除未使用的代码。
• 确保模块是 ES 模块：Tree Shaking 对 ES 模块效果最好，确保依赖项是 ES 模块格式。

4. 预构建依赖

• 依赖预构建：Vite 在首次启动时会对项目的依赖项进行预构建，将 CommonJS 或 UMD 格式的依赖转换为 ES 模块格式，并缓存起来。
• 手动配置预构建：通过 optimizeDeps 配置手动预构建依赖项。
• 示例：

  export default defineConfig({
    optimizeDeps: {
      include: ['lodash-es', 'axios'],
    },
  });
  

5. 静态资源处理

• 内联小文件：通过 assetsInlineLimit 配置将小文件内联为 base64 编码的 Data URL。
• 示例：

  export default defineConfig({
    build: {
      assetsInlineLimit: 4096, // 4KB
    },
  });
  

6. 使用 CDN

• 将静态资源托管到 CDN：通过 base 配置将静态资源托管到 CDN。
• 示例：

  export default defineConfig({
    base: 'https://cdn.example.com/assets/',
  });
  

7. 启用 Gzip/Brotli 压缩

• 使用 vite-plugin-compression 插件：压缩构建输出的文件（如 Gzip 或 Brotli）。
• 示例：

  import viteCompression from 'vite-plugin-compression';
  
  export default defineConfig({
    plugins: [
      viteCompression({
        algorithm: 'gzip',
      }),
    ],
  });
  

8. 配置 Sourcemap

• 生成 Sourcemap：通过 sourcemap 配置生成 Sourcemap 文件，便于调试。
• 示例：

  export default defineConfig({
    build: {
      sourcemap: true,
    },
  });
  

9. 优化 CSS

• CSS 代码分割：通过 cssCodeSplit 配置启用 CSS 代码分割。
• 示例：

  export default defineConfig({
    build: {
      cssCodeSplit: true,
    },
  });
  

10. 使用多线程构建

• 使用 vite-plugin-multi-thread 插件：通过多线程构建提升构建速度。
• 示例：

  import multiThread from 'vite-plugin-multi-thread';
  
  export default defineConfig({
    plugins: [multiThread()],
  });
  

示例：完整的生产构建优化配置

以下是一个完整的 vite.config.js 文件示例，包含常用的生产构建优化配置选项：

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

export default defineConfig({
  plugins: [
    vue(),
    viteCompression({
      algorithm: 'gzip',
    }),
  ],
  build: {
    outDir: 'dist',
    assetsDir: 'assets',
    assetsInlineLimit: 4096,
    cssCodeSplit: true,
    sourcemap: true,
    minify: 'terser',
    terserOptions: {
      compress: {
        drop_console: true,
      },
    },
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['lodash', 'axios'],
        },
      },
    },
  },
  optimizeDeps: {
    include: ['lodash-es', 'axios'],
  },
  base: 'https://cdn.example.com/assets/',
});

总结

通过代码分割、压缩代码、Tree Shaking、预构建依赖、静态资源处理、使用 CDN、启用 Gzip/Brotli 压缩、配置 Sourcemap、优化 CSS 和使用多线程构建等策略，可以显著优化 Vite 的生产构建性能。合理配置这些选项，可以提升应用的加载速度和运行效率。