背景与问题定位

在开发某中大型前端项目时，团队发现Vite的打包时间从初期30秒逐步攀升至110秒，严重影响本地开发与CI/CD效率。通过分析发现，问题主要集中于三个维度：

依赖体积膨胀：node_modules体积达320MB，其中未使用的依赖占比超40%
构建配置冗余：vite.config.js中存在重复的插件配置和未优化的参数
缓存机制缺失：每次构建都全量执行，未利用中间缓存

依赖优化：精准剪枝

1. 依赖树可视化分析

使用npm ls和webpack-bundle-analyzer（适配Vite的插件）生成依赖图谱，发现：

多个版本的lodash共存（4.17.x与5.x）
开发环境依赖（如@types/）被错误打包
未使用的UI组件库（完整引入但仅使用10%组件）

优化措施：

# 精确安装依赖版本
npm install lodash@4.17.21 --save-exact
# 移除未使用依赖
npm uninstall unused-lib @types/unused-pkg

2. 按需引入策略

对UI组件库实施按需加载：

// vite.config.js 配置示例
import { createStyleImportPlugin } from 'vite-plugin-style-import';
export default {
  plugins: [
    createStyleImportPlugin({
      libs: [
        {
          libraryName: 'antd',
          esModule: true,
          resolveStyle: (name) => `antd/es/${name}/style/index.css`,
        },
      ],
    }),
  ],
};

效果：打包体积减少65%，构建时间缩短18秒。

构建配置深度调优

1. 多核构建优化

启用Vite的build.rollupOptions.output.manualChunks进行代码分割：

export default {
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['react', 'react-dom', 'react-router-dom'],
          ui: ['antd', 'echarts'],
        },
      },
    },
  },
};

配合build.workerConcurrency设置（建议为CPU核心数-1），使CSS处理与JS编译并行执行。

2. 静态资源处理

对图片资源实施以下优化：

// vite.config.js
import { viteStaticCopy } from 'vite-plugin-static-copy';
export default {
  plugins: [
    viteStaticCopy({
      targets: [
        {
          src: 'src/assets/images/*',
          dest: 'assets',
          transform(contents) {
            // 使用sharp库进行图片压缩
            return sharp(contents)
              .jpeg({ quality: 70 })
              .toBuffer();
          },
        },
      ],
    }),
  ],
};

测试显示：图片处理时间从12秒降至3秒。

缓存策略实施

1. 持久化缓存配置

// vite.config.js
import { viteCommonjs } from '@originjs/vite-plugin-commonjs';
import viteCompression from 'vite-plugin-compression';
export default {
  cacheDir: './node_modules/.vite-cache',
  build: {
    cache: true,
  },
  plugins: [
    viteCommonjs(),
    viteCompression({
      algorithm: 'brotliCompress',
      ext: '.br',
    }),
  ],
};

关键点：

单独设置缓存目录避免冲突
启用Brotli压缩（比Gzip节省15%体积）
配置build.reportCompressedSize监控压缩效果

2. CI/CD缓存优化

在构建脚本中添加缓存恢复逻辑：

# 构建前恢复缓存
if [ -d "./node_modules/.vite-cache" ]; then
  cp -r ./node_modules/.vite-cache/.vite ./node_modules/
fi
# 构建后保存缓存
mkdir -p ./node_modules/.vite-cache
cp -r ./node_modules/.vite ./node_modules/.vite-cache/

实测数据：冷启动构建时间从110秒降至45秒，热启动（缓存命中）仅需25秒。

监控与持续优化

建立构建性能看板：

在vite.config.js中集成性能监控：
```javascript
import { performance } from ‘perf_hooks’;

export default {
configureServer(server) {
server.middlewares.use((req, res, next) => {
const start = performance.now();
res.on(‘finish’, () => {
const duration = performance.now() - start;
console.log([Vite] ${req.url} took ${duration.toFixed(2)}ms);
});
next();
});
},
};
```

结合GitHub Actions的timing信息，识别构建瓶颈模块

最终优化成果

优化阶段	打包时间	优化幅度
初始状态	110s	-
依赖优化后	82s	-25.5%
构建配置调优后	58s	-29.3%
缓存实施后	25s	-56.9%

最佳实践总结

依赖管理三原则：
- 严格版本控制（使用package-lock.json）
- 定期执行npm prune清理无用依赖
- 开发环境依赖单独管理（devDependencies）
构建配置黄金法则：
- 代码分割粒度控制在3-5个chunk
- 避免在配置中写死路径（使用path.resolve）
- 生产环境禁用source map
缓存策略要点：
- 缓存目录与node_modules分离
- 定期清理过期缓存（建议7天）
- 监控缓存命中率（目标>85%）

通过系统化的优化，不仅解决了当前性能问题，更为项目后续扩展建立了可维护的性能优化体系。实际案例表明，遵循上述方法可使中大型Vite项目的构建效率提升3-5倍。

Vite打包性能飞跃：从110s到25s的优化实践