你不可不知的Vite 打包优化实践指南Vite 打包优化实践指南 Vite 凭借原生 ES 模块和 esbuild 的优

Vite 打包优化实践指南

Vite 凭借原生 ES 模块和 esbuild 的优势，开发环境性能优异，但生产环境仍需通过 Rollup 打包。针对大型项目，合理的优化配置能显著减小包体积、提升构建速度和页面加载性能。

一、体积优化：减小生产环境包体积

1. 依赖分析：定位体积问题

首先通过可视化工具分析包结构，找出体积过大的依赖或冗余代码：

bash

# 安装分析插件
npm i rollup-plugin-visualizer -D

在vite.config.js中配置：

javascript

import { visualizer } from 'rollup-plugin-visualizer'

export default defineConfig({
  plugins: [
    // 打包后生成stats.html分析报告
    visualizer({
      filename: './node_modules/.cache/visualizer/stats.html',
      open: true, // 自动打开报告
      gzipSize: true, // 显示gzip压缩后的大小
      brotliSize: true // 显示brotli压缩后的大小
    })
  ]
})

2. 代码分割：拆分公共依赖

通过build.rollupOptions.output配置代码分割策略，避免重复打包公共库：

javascript

export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        // 拆分代码块
        manualChunks: {
          // 拆分vue相关依赖打包为单独chunk
          vue: ['vue', 'vue-router', 'pinia'],
          // 拆分工具库
          utils: ['lodash-es', 'date-fns'],
          // 拆分UI组件库
          ui: ['element-plus']
        }
      }
    }
  }
})

3. 移除未使用代码

Tree-shaking：Vite 默认开启 Tree-shaking，确保package.json中设置了"sideEffects": false（无副作用模块）

按需 Import：对 UI 库使用按需导入（以 Element Plus 为例）：

javascript

// vite.config.js
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  plugins: [
    Components({
      resolvers: [ElementPlusResolver()] // 自动导入组件和样式
    })
  ]
})

4. 压缩资源

JS/CSS 压缩：Vite 默认使用 esbuild 压缩，可配置更精细的压缩策略：

javascript

export default defineConfig({
  build: {
    minify: 'esbuild', // 可选terser（支持更多压缩选项）
    esbuild: {
      dropconsole: true, // 生产环境移除console
      dropdebugger: true // 移除debugger
    }
  }
})

图片压缩：使用vite-plugin-imagemin处理图片：

bash

npm i vite-plugin-imagemin -D

javascript

import viteImagemin from 'vite-plugin-imagemin'

export default defineConfig({
  plugins: [
    viteImagemin({
      gifsicle: { quality: 80 }, // gif压缩
      optipng: { optimizationLevel: 2 }, // png压缩
      mozjpeg: { quality: 80 }, // jpg压缩
      pngquant: { quality: [0.6, 0.8] }
    })
  ]
})

二、速度优化：提升打包效率

1. 缓存构建结果

利用 Vite 的缓存机制减少重复构建时间：

javascript

export default defineConfig({
  cacheDir: './node_modules_modules/.vite' // 缓存目录（默认已配置）
})

2. 优化依赖预构建

Vite 会预构建非 ESM 依赖，通过optimizeDeps配置排除无需预构建的模块：

javascript

export default defineConfig({
  optimizeDeps: {
    exclude: ['不需要预构建的模块'], // 排除特定模块
    include: ['需要强制预构建的模块'] // 强制预构建动态导入的模块
  }
})

3. 多线程打包

使用rollup-plugin-terser的多线程模式（需安装 terser）：

bash

npm i terser -D

javascript

import { terser } from 'rollup-plugin-terser'

export default defineConfig({
  build: {
    minify: 'terser',
    terserOptions: {
      parallel: true // 多线程压缩
    }
  }
})

4. 减少文件处理范围

通过include/exclude限制处理的文件：

javascript

export default defineConfig({
  esbuild: {
    include: /src/.*.(ts|js|vue)$/, // 只处理src目录下的指定文件
    exclude: /node_modules/
  }
})

三、缓存策略：提升二次加载速度

1. 静态资源哈希

配置文件名哈希，确保内容变化时文件名变化，避免缓存污染：

javascript

export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        // 文件名格式：[name].[hash:8].[ext]
        entryFileNames: 'js/[name].[hash:8].js',
        chunkFileNames: 'js/[name].[hash:8].js',
        assetFileNames: '[ext]/[name].[hash:8].[ext]'
      }
    }
  }
})

2. 启用 Gzip/Brotli 压缩

使用vite-plugin-compression生成压缩文件：

bash

npm i vite-plugin-compression -D

javascript

import compression from 'vite-plugin-compression'

export default defineConfig({
  plugins: [
    compression({
      algorithm: 'gzip', // 可选brotliCompress
      threshold: 10240, // 大于10kb的文件才压缩
      deleteOriginFile: false // 不删除原文件
    })
  ]
})

3. 配置 CDN 加速

将公共依赖通过 CDN 引入，减少打包体积：

javascript

// vite.config.js
export default defineConfig({
  build: {
    rollupOptions: {
      external: ['vue', 'vue-router'], // 排除CDN依赖
      output: {
        globals: {
          vue: 'Vue',
          'vue-router': 'VueRouter'
        }
      }
    }
  }
})

在index.html中引入 CDN：

html

<script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-router@4/dist/vue-router.global.prod.js"></script>

四、生产环境特殊配置

关闭 sourceMap（减少体积，提高安全性）：

javascript

export default defineConfig({
  build: {
    sourcemap: false // 生产环境关闭sourceMap
  }
})

CSS 优化：

javascript

export default defineConfig({
  build: {
    cssCodeSplit: true, // 拆分CSS为单独文件
    cssTarget: 'browserslist' // 针对目标浏览器优化CSS
  }
})

五、优化效果验证

打包后检查dist目录大小，对比优化前后差异
使用web-vitals或 Lighthouse 检测页面加载性能
验证缓存策略：修改代码后重新打包，确认哈希值变化

通过以上实践，可使 Vite 打包的项目体积减少 30%-50%，构建速度提升 40% 以上，同时显著改善用户加载体验。建议根据项目实际情况（如依赖特点、业务场景）逐步应用优化策略，优先解决体积和速度瓶颈。

以上优化方案覆盖了 Vite 打包的核心场景，每个配置都有明确的适用场景和效果。如果你的项目有特定的性能瓶颈（比如图片过多、依赖体积异常大），可以告诉我，我会提供更针对性的优化建议。