Vue3项目生产环境增量打包，提高构建速度

打包优化

【参考】
vite打包性能优化以及填坑
我是如何把 Vite 的打包时间从 110s 优化到 25s 的(后续细读)

将文件分门别类

完整配置示例（vite.config.js）

import { defineConfig } from 'vite'
import path from 'path'

export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        // 入口 JS 文件配置
        entryFileNames: 'assets/js/[name]-[hash].js',
        
        // 非入口 chunk 文件
        chunkFileNames: 'assets/js/chunks/[name]-[hash].js',
        
        // 资源文件（图片、字体等）
        assetFileNames: (assetInfo) => {
          const extType = assetInfo.name?.split('.').at(1)
          const isFont = ['ttf', 'woff', 'woff2'].includes(extType)
          const isImage = ['png', 'jpg', 'jpeg', 'gif', 'svg'].includes(extType)

          if (isImage) {
            return 'assets/images/[name]-[hash][extname]'
          }
          if (isFont) {
            return 'assets/fonts/[name]-[hash][extname]'
          }
          return 'assets/[ext]/[name]-[hash][extname]'
        }
      }
    },
    // 静态资源全局目录（会被 rollupOptions 覆盖）
    assetsDir: 'assets' 
  },
  plugins: [
    // CSS 分类插件
    {
      name: 'css-classify',
      generateBundle(_, bundle) {
        Object.keys(bundle).forEach((fileName) => {
          if (fileName.endsWith('.css')) {
            const newName = fileName.replace('assets/', 'assets/css/')
            bundle[fileName].fileName = newName
          }
        })
      }
    }
  ]
})

生成目录结构

应用上述配置后，构建结果将呈现以下结构

dist/
├─ assets/
│  ├─ js/
│  │  ├─ main-3b9d8e7f.js
│  │  └─ chunks/
│  │     └─ login.e5f6a8c2.js
│  ├─ css/
│  │  ├─ style.1a2b3c4d.css
│  │  └─ vendor.d5e6f7a8.css
│  ├─ images/
│  │  ├─ logo-abc123.png
│  │  └─ banner-def456.jpg
│  └─ fonts/
│     ├─ font-awesome-7890gh.woff2
│     └─ roboto-123ijk.ttf
└─ index.html

最小化拆分包

rollupOptions: {
  output: {
    manualChunks(id) {
      if (id.includes("node_modules")) {
        // 让每个插件都打包成独立的文件
        return id .toString() .split("node_modules/")[1] .split("/")[0] .toString(); 
      }
    }
  }
}

去除debugger

目前参与开发的项目（产品除外），要不没安装terser，要不安装了但是没在vite.config.ts进行相关配置

npm i terser -D

官方更建议使用默认的esbuild而不是terser，也支持去除debugger，只需配置

esbuild: {  
    drop: ['console', 'debugger'] 
}

UI组件库以及插件按需导入

增量打包

webpack增量打包
Vue配置自动打包并增量更新

以下内容来自DeepSeek，不是很理解，没有搜索到关于Vite的增量打包文章。

开发环境增量构建主要依赖HMR，而生产环境需要确保输出的稳定性和可靠性，不能简单复用开发环境的策略。生产环境增量构建需要考虑如何只构建变更的部分，同时保证缓存的有效性和版本控制。

增量打包实现流程：

一、核心架构设计原则

1. 模块化拆分标准

src/
├─ core/           # 核心基础库（低频变更）
├─ modules/        # 业务模块（独立构建单元）
│  ├─ user/        # 用户模块
│  └─ order/       # 订单模块
└─ shared/         # 公共工具库

2. 版本管理策略

// 模块版本声明文件
export const MODULE_VERSIONS = {
  user: '1.2.3',    // 随每次构建自动递增
  order: '2.1.7'
}

---

二、构建系统深度优化方案

1. 智能缓存层配置（Vite）

// vite.config.js
export default {
  build: {
    cacheDir: './.production_cache',
    rollupOptions: {
      output: {
        entryFileNames: `[name]-${versionHash}.js`,
        chunkFileNames: `[name]-${versionHash}.js`,
        assetFileNames: `[name]-${versionHash}.[ext]`
      }
    }
  },
  plugins: [
    {
      name: 'cache-versioning',
      configResolved(config) {
        versionHash = createHash('sha256')
          .update(fs.readFileSync('package-lock.json'))
          .digest('hex')
          .substr(0, 8)
      }
    }
  ]
}

2. 增量检测引擎

# 构建前执行变更检测
CHANGED_MODULES=$(git diff --name-only HEAD~1 HEAD | 
  grep -o 'src/modules/[^/]*' | 
  sort | 
  uniq)

# 生成构建任务队列
echo $CHANGED_MODULES | xargs -n1 | while read MODULE; do
  npm run build:module $MODULE
done

---

三、模块级构建流水线

1. 独立模块构建配置

// build/module.config.js
export default ({ module }) => ({
  build: {
    outDir: `dist/modules/${module}`,
    lib: {
      entry: `src/modules/${module}/index.ts`,
      name: `${module}Module`,
      formats: ['es']
    },
    rollupOptions: {
      external: ['vue', 'vue-router']
    }
  }
})

2. 构建命令编排

// package.json
{
  "scripts": {
    "build:module": "vite build --config build/module.config.js",
    "build:core": "vite build --config build/core.config.js",
    "build:all": "run-p build:core build:module:*"
  }
}

---

四、生产环境增量发布策略

1. 动态资源加载机制

// 主应用加载逻辑
const loadProductionModule = async (moduleName) => {
  const { version } = await fetch('/module-versions.json')
  return import(`https://cdn.example.com/modules/${moduleName}-${version[moduleName]}.js`)
}

2. CDN 部署配置

# 增量发布目录结构
cdn-root/
├─ modules/
│  ├─ user-1.2.3.js
│  └─ order-2.1.7.js
└─ core-3.0.5/
   ├─ core-3.0.5.js
   └─ styles-3.0.5.css

---

五、安全与监控体系

1. 构建校验机制

// 模块签名验证
import { createVerify } from 'crypto'

const verifyModule = (content, signature) => {
  const verify = createVerify('SHA256')
  verify.update(content)
  return verify.verify(publicKey, signature)
}

2. 性能监控看板

// 构建性能追踪
const metrics = {
  buildStart: Date.now(),
  moduleSizes: {},
  dependencies: {}
}

export default {
  build: {
    rollupOptions: {
      plugins: [{
        name: 'build-metrics',
        writeBundle(options, bundle) {
          Object.entries(bundle).forEach(([name, asset]) => {
            metrics.moduleSizes[name] = asset.size
          })
          metrics.buildTime = Date.now() - metrics.buildStart
          sendMetricsToServer(metrics)
        }
      }]
    }
  }
}

---

六、渐进式回退方案

1. 全量构建保底机制

# 每周日凌晨执行全量构建
0 0 * * 0 npm run build:all

2. 版本兼容层设计

// 版本兼容适配器
class ModuleAdapter {
  constructor(moduleName) {
    this.currentVersion = MODULE_VERSIONS[moduleName]
    this.fallbackVersion = this.getStableVersion()
  }

  async load() {
    try {
      return await this.loadModule(this.currentVersion)
    } catch (error) {
      return await this.loadModule(this.fallbackVersion)
    }
  }
}

---

七、效能提升对比

优化阶段	构建时间	产物大小	部署频率
传统全量构建	8min	12MB	3次/天
基础增量构建	2min	4MB	10次/天
高级增量方案	45s	1.2MB	30次/天

---

实施路线图

1. 第一阶段（1-2周）

   • 完成模块化架构改造
   • 建立基础构建流水线
   • 实现核心模块增量构建

2. 第二阶段（3-4周）

   • 部署智能缓存系统
   • 集成构建监控体系
   • 建立安全验证机制

3. 第三阶段（5-6周）

   • 实现动态版本管理
   • 完成全自动化部署
   • 建立效能评估模型

---

该方案已在多个大型 Vue3 项目中验证，典型场景下可实现：

• 生产构建速度提升 5-8倍
• 资源传输量减少 60-75%
• 部署频率提高 300%
• 故障回滚时间缩短至 30秒内

建议配合以下工具链使用：

• 构建加速：Vite 3+ / Rollup 3
• 部署系统：Jenkins / GitLab CI
• 监控平台：Prometheus + Grafana
• 安全审计：SonarQube

实际实施时需根据项目特性调整模块拆分粒度和缓存策略，建议通过渐进式改造逐步落地。