混合项目打包与构建优化方案

01 混合项目概述

什么是混合项目 Web+小程序+H5 统一构建方案

典型场景 · 必要性

02 构建工具选型

Webpack 5 Vite Turbopack 选型矩阵

对比分析 · 决策

03 Monorepo 基础

Monorepo 概念 pnpm workspace npm/yarn/pnpm

搭建 · 对比

04 项目结构设计

packages 划分 共享模块 版本管理策略

目录 · 模块设计

05 TypeScript 配置

tsconfig 继承 路径别名 类型检查优化

覆盖 · 配置

06 ESLint 与 Prettier

统一代码规范 多项目共享 lint-staged

规范 · 集成

07 Webpack 基础配置

entry/output loader/plugin 开发环境

核心概念 · 搭建

08 Webpack 高级配置

SplitChunks Tree Shaking Scope Hoisting

代码分割 · 优化

09 Vite 基础配置

核心原理 开发服务器 生产构建

配置 · 构建

10 Vite 高级配置

多页面应用 库模式打包 环境变量

MPA · 库模式

11 Babel 配置

preset-env polyfill 策略 @babel/runtime

编译 · 运行时

12 CSS 处理方案

PostCSS CSS Modules Tailwind CSS CSS-in-JS

集成 · 对比

13 静态资源处理

图片压缩 字体优化 SVG 处理 雪碧图

资源 · 优化

14 环境变量管理

dotenv 多环境配置 运行时注入

变量 · 环境

15 构建缓存策略

Webpack 持久缓存 Vite 缓存 babel 缓存 node_modules 缓存

缓存 · 加速

16 代码压缩与优化

TerserPlugin CSS 压缩 Gzip/Brotli 图片压缩

压缩 · 优化

17 分包策略

按路由分包 按业务分包 公共依赖提取 动态导入

拆分 · 优化

18 CDN 与资源部署

静态资源上传 域名配置 缓存策略 版本管理

部署 · CDN

19 CI/CD 集成

GitHub Actions 构建流水线 自动化测试

持续集成 · 部署

20 构建性能监控

Bundle Analyzer Vite 构建分析 性能指标采集

监控 · 分析

21 HMR 热更新优化

Webpack HMR Vite HMR 大型项目优化

热更新 · 原理

22 微前端集成

Module Federation qiankun 子应用构建优化

微前端 · 集成

23 小程序构建

uni-app 配置 Taro 配置 小程序分包

跨端 · 优化

24 SSR 构建优化

Next.js/Nuxt.js 服务端渲染缓存 静态生成

SSR · 优化

25 构建安全

依赖安全检查 产物安全 供应链攻击防范

安全 · 防护

26 构建产物分析

产物结构分析 冗余代码检测 性能预算

分析 · 预算

27 增量构建

Webpack 5 持久缓存 Vite 增量构建 esbuild 加速

增量 · 加速

28 构建脚本编写

Node.js 脚本 构建钩子 自定义插件

脚本 · 插件

29 构建文档与规范

构建文档编写 团队规范 Code Review

文档 · 流程

30 实战案例

大型电商项目 5分钟→30秒 构建优化历程

实战 · 优化