# vite构建优化

# 先明确优化目标

Vite 优化一般分两类：

开发阶段：启动更快、热更新更快
生产构建：打包更快、产物更小、缓存更友好

# 开发阶段优化

# 1）合理使用依赖预构建

Vite 会用 esbuild 预构建依赖，但有些场景需要手动干预：

import { defineConfig } from "vite";

export default defineConfig({
  optimizeDeps: {
    include: ["lodash-es", "dayjs"],
    exclude: ["your-big-lib"],
  },
});

1
2
3
4
5
6
7
8

适用场景：

首次启动时某些依赖解析慢
某些依赖被错误预构建导致兼容问题

# 2）减少巨型入口

一个页面 import 太多模块，会放大模块图解析成本。
可以做路由懒加载、按业务拆分入口。

# 3）避免 dev 阶段引入超大 polyfill

开发环境通常不需要全量兼容包，能显著降低启动和 HMR 开销。

# 生产构建优化

# 1）手动分包（manualChunks）

import { defineConfig } from "vite";

export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          react: ["react", "react-dom"],
          vendor: ["axios", "dayjs"],
        },
      },
    },
  },
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14

价值：

提升浏览器缓存命中
降低单个 chunk 体积

# 2）按需开启 sourcemap

build: {
  sourcemap: false;
}

1
2
3

线上不需要时关闭，能减小产物体积和构建时间。

# 3）调整压缩策略

默认 esbuild 压缩已经很快，追求极致体积再考虑 terser（通常更慢）。

# 资源与缓存策略

业务代码与第三方依赖分包
文件名带 hash（Vite 默认支持）
静态资源走 CDN，开启长缓存

# 分析产物

推荐使用可视化插件分析 bundle：

yarn add -D rollup-plugin-visualizer

然后在 build 后看哪个包最大、是否重复依赖。

# 一个实践原则

优化优先级建议是：

先观察（构建时间、产物体积）
再定位（大包、重复依赖、慢模块）
后优化（拆包、懒加载、替换依赖）

# 小结

Vite 的优化不是“堆配置”，而是围绕模块图和产物结构做针对性治理。
把依赖预构建、chunk 划分、缓存策略三件事做好，收益通常最明显。

← vite环境变量 vite原理：启动与构建流程 →