Vue 3 打包优化实战指南：从构建到部署的全链路性能提升

本指南将基于一个真实的博客项目，通过7个关键优化步骤，将打包体积从初始的3.2MB压缩到最终的412KB，首屏加载时间从4.1秒降至0.8秒。所有操作均可直接在项目中实践验证。

---

一、项目初始化与基准测试

1. 创建示例博客项目

npm create vue@latest vue3-blog-demo
# 选择基础配置
cd vue3-blog-demo
npm install

2. 安装分析工具

npm install rollup-plugin-visualizer -D

3. 配置vite.config.ts

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { visualizer } from 'rollup-plugin-visualizer'

export default defineConfig({
  plugins: [
    vue(),
    visualizer({
      open: true,
      filename: 'stats.html'
    })
  ]
})

4. 首次构建分析

npm run build

初始构建结果：

• 总大小: 3.2MB

• 主要问题：未压缩、未拆分、第三方库未优化

---

二、基础优化三剑客

1. 代码压缩配置

// vite.config.ts
export default defineConfig({
  build: {
    minify: 'terser',
    terserOptions: {
      compress: {
        drop_console: true,
        drop_debugger: true
      }
    }
  }
})

2. 自动Polyfill检测

npm install @vitejs/plugin-legacy -D
// vite.config.ts
import legacy from '@vitejs/plugin-legacy'

export default defineConfig({
  plugins