Vite 预打包优化实践：解决 TailwindCSS 导致的首次加载延迟

1. 为什么TailwindCSS会让Vite首次加载变慢？

最近在把项目从Webpack迁移到Vite时，我发现一个奇怪的现象：虽然Vite启动速度飞快，但首次打开页面却要等10-20秒。打开开发者工具一看，好家伙，浏览器一口气发了132个请求！其中最大的文件就是TailwindCSS。这让我很困惑，明明Vite以快著称，怎么实际体验反而变差了？

其实这和Vite的工作原理有关。Vite采用了一种叫"依赖预构建"的机制，简单来说就是它会先把项目依赖的第三方库提前打包好。但TailwindCSS这种工具比较特殊，它会在运行时动态生成大量CSS类名。Vite第一次运行时需要处理这些动态内容，导致预构建阶段特别耗时。

我对比了一下Webpack和Vite的表现差异：

• Webpack：启动慢（1-2分钟），但首次加载快
• Vite：启动快（1秒内），但首次加载慢

这种差异的本质在于两者的构建时机不同。Webpack是启动时就把所有东西都打包好，而Vite是按需构建。对于TailwindCSS这种动态生成样式的工具，Vite的按需特性反而成了负担。

2. Vite预打包机制深度解析

2.1 预构建的核心原理

Vite的预构建（Pre-Bundling）主要做两件事：

1. 把CommonJS模块转成ESM格式
2. 把多个小文件合并成大文件，减少网络请求

默认情况下，Vite会自动扫描你的代码，找出所有依赖项进行预构建。但遇到像TailwindCSS这样的动态依赖时，自动检测就可能失效。这就是为什么我们会在控制台看到大量小文件请求。

2.2 optimizeDeps配置详解

Vite提供了optimizeDeps配置项来优化这个过程。其中最重要的两个参数是：

• include：强制包含某些依赖进行预构建
• exclude：排除某些依赖不进行预构建

对于TailwindCSS，我们需要把它的核心模块和插件都加入include列表。但手动维护这个列表很麻烦，特别是当项目使用了很多第三方组件库时。

3. 自动化预打包优化方案

3.1 vite-plugin-optimize-persist实战

经过多次尝试，我发现了一个超好用的插件组合：

1. vite-plugin-package-config：把优化配置写入package.json
2. vite-plugin-optimize-persist：自动记录实际用到的依赖

安装方法很简单：

npm install -D vite-plugin-optimize-persist vite-plugin-package-config

然后在vite.config.ts中配置：

import OptimizationPersist from "vite-plugin-optimize-persist" import PkgConfig from "vite-plugin-package-config" export default { plugins: [ PkgConfig(), OptimizationPersist(), // 其他插件... ], optimizeDeps: { include: [ // 初始可以放一些已知依赖 "vue", "pinia", "vue-router", "tailwindcss/plugin" ] } }

3.2 常见问题排查

我在使用过程中遇到过几个坑：

1. 插件没有自动更新package.json
   • 解决方法：检查插件版本，确保两个插件都正确安装
2. 某些深层依赖没被识别
   • 解决方法：观察控制台输出，手动添加到include
3. 热更新失效
   • 解决方法：排除开发专用依赖，如"vite/client"

4. 高级优化技巧

4.1 按需引入UI组件库

如果你用了Element Plus这样的UI库，要特别注意样式文件的引入方式。我推荐这样配置：

optimizeDeps: { include: [ "element-plus/es/components/button/style/css", "element-plus/es/components/input/style/css", // 其他用到的组件... ] }

4.2 TailwindCSS专项优化

对于TailwindCSS，除了基本配置外，还可以：

1. 精简配置文件tailwind.config.js
2. 使用@apply提取常用样式
3. 开启JIT模式（TailwindCSS 2.1+）

// tailwind.config.js module.exports = { mode: 'jit', purge: [ './src/**/*.vue', './src/**/*.js' ], // 其他配置... }

5. 效果对比与实测数据

经过上述优化后，我的项目加载时间从原来的15秒降到了3秒以内。具体变化如下：

这个提升在开发过程中感受特别明显。以前每次启动项目都要去接杯咖啡，现在终于可以流畅地边改边看了。

6. 最佳实践总结

经过多次项目实践，我总结出几个关键点：

1. 一定要用vite-plugin-optimize-persist自动管理依赖
2. 大型UI库要按需引入样式文件
3. TailwindCSS开启JIT模式
4. 定期检查控制台输出的优化建议

配置示例：

// vite.config.ts optimizeDeps: { include: [ // 基础框架 'vue', 'vue-router', 'pinia', // UI库按需引入 'element-plus/es/components/button/style/css', 'element-plus/es/components/form/style/css', // 工具库 'lodash-es', 'axios', // Tailwind相关 'tailwindcss/plugin', '@tailwindcss/forms' ], exclude: [ // 不需要预构建的依赖 'vite/client' ] }

记住一个原则：Vite的优化是个持续的过程。随着项目发展，要不断调整optimizeDeps配置。每次添加新依赖后，记得观察首次加载性能，及时更新include列表。