Vite 构建效能深度调优：依赖预构建与分包策略的最佳实践

Vite 凭借基于 ESM 的开发服务器重塑了前端开发体验，但在大型工程中，随项目体积膨胀，仍会遭遇冷启动预构建卡顿、HMR 边界失控及生产包体积失控等问题。本文聚焦 Vite 核心机制，通过正反例对比，给出可落地的性能优化最佳实践。

一、依赖预构建的精准管控

Vite 将 CommonJS/UMD 模块转为 ESM 的预构建过程，是冷启动速度的关键。默认启发式算法下，若依赖未被正确识别，会导致页面加载时触发即时预构建，严重拖慢首屏。

反例：未干预预构建，导致运行时动态发现依赖

// vite.config.js
export default defineConfig({
  // 不配置 optimizeDeps，Vite 可能在浏览器请求时才触发预构建
  // 导致页面刷新，且冷启动极慢
})

正例：显式声明预构建依赖，提前打包

// vite.config.js
export default defineConfig({
  optimizeDeps: {
    include: [
      'lodash-es',
      'axios',
      'vue',
      'vue-router',
      'pinia',
      // 明确包含深层路径的引入
      'echarts/core', 
      'echarts/charts'
    ],
    // 排除不需要预构建的包，减少构建时间
    exclude: ['@iconify-icons/ep'] 
  }
})

显式配置 include 可将预构建提前至 Vite 启动阶段，避免运行时重复构建；exclude 可剔除仅含 ESM 格式且无副作用的轻量包，缩小预构建范围。

二、路由与组件的细粒度懒加载

Vite 原生支持 ESM 动态导入，若未合理利用，首屏将加载全量 JS，造成严重性能浪费。

反例：静态导入所有页面组件

import Home from './views/Home.vue'
import About from './views/About.vue'
import User from './views/User.vue'

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
  { path: '/user', component: User }
]

正例：基于路由的动态导入与 Chunk 命名

const routes = [
  { 
    path: '/', 
    component: () => import(
      /* webpackChunkName: "home" */ 
      './views/Home.vue'
    ) 
  },
  { 
    path: '/about', 
    component: () => import(
      /* webpackChunkName: "about" */ 
      './views/About.vue'
    ) 
  }
]

不仅如此，对于页面内重型组件（如富文本、复杂图表），也应采用条件性动态导入：

// 反例：直接引入重型组件
import HeavyChart from './components/HeavyChart.vue'

// 正例：交互触发时按需加载
<script setup>
const HeavyChart = defineAsyncComponent(() => 
  import('./components/HeavyChart.vue')
)
const showDialog = ref(false)
</script>

三、构建产物拆包与去重策略

Vite 默认将所有业务代码打包至单个 index.js，第三方库打包至一个 vendor.js。在大型应用中，这会导致单个文件过大、缓存命中率极低。必须通过 manualChunks 自定义分包。

反例：默认打包策略

// vite.config.js
export default defineConfig({
  build: {
    // 默认策略，vendor 体积可能达到数 MB
  }
})

正例：基于稳定依赖的细粒度分包

// vite.config.js
export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        manualChunks(id) {
          if (id.includes('node_modules')) {
            // 核心框架独立打包，利用长期缓存
            if (id.includes('vue') || id.includes('pinia')) {
              return 'framework'
            }
            // UI 库独立打包
            if (id.includes('element-plus')) {
              return 'element-plus'
            }
            // 其他工具库聚合
            return 'vendor-utils'
          }
        }
      }
    }
  }
})

此外，Monorepo 或使用不同版本的依赖时，极易出现重复打包。需配合 build.rollupOptions.dedupe 去重：

export default defineConfig({
  resolve: {
    dedupe: ['vue', 'vue-router']
  }
})

四、插件管道的瘦身与过滤

Vite 插件在开发和构建阶段均参与模块图的处理。未限制作用域的插件会处理所有文件，拖慢编译速度。

反例：无过滤的全局插件

// vite.config.js
import { vitePluginMarkdown } from 'vite-plugin-markdown'

export default defineConfig({
  plugins: [
    // 处理所有文件，即使不需要解析 .md 以外的文件
    vitePluginMarkdown() 
  ]
})

正例：利用 apply 与 enforce 缩小插件作用域

import { vitePluginMarkdown } from 'vite-plugin-markdown'

export default defineConfig({
  plugins: [
    {
      ...vitePluginMarkdown(),
      // 仅在构建阶段生效
      apply: 'build', 
      // 自定义过滤，仅处理 src/docs 下的 md
      resolveId(id) {
        if (!id.includes('src/docs')) return null
      },
      // 强制前置执行，避免被其他插件干扰
      enforce: 'pre' 
    }
  ]
})

同时，尽量复用 Vite 内置的 createFilter 工具函数，在插件内部实现高效的 include/exclude 过滤，避免无谓的 AST 解析。

结语

Vite 的性能优化不仅在于配置项的调整，更在于对模块图、依赖关系和构建管道的深刻理解。从预构建的显式管控，到动态导入的精细化执行，再到 Rollup 分包策略的定制，每一环都是大型前端工程迈向极致性能的关键。