第4章 小程序工程化与构建工具：Webpack/Gulp 配置、分包构建、CI/CD 集成
小程序工程化是连接开发与交付的核心环节，面试官常围绕构建配置优化、分包策略设计、CI/CD 流水线三大方向展开深挖。本章从高频考点出发，拆解回答框架与可迁移话术。
📌 面试问题：如何配置 Webpack 优化小程序构建过程？
是否理解 Webpack 核心机制在小程序场景下的应用；能否针对小程序特性定制构建策略；是否有实际的构建优化经验与量化成果。
入口配置 → 分包映射 → 编译优化 → 资源压缩 → 产物校验。按构建流水线顺序展开，每步点明具体插件或配置项。
通过多 entry 配置主包与分包，使用 SplitChunksPlugin 抽取公共模块，TerserPlugin 压缩 JS，MiniCssExtractPlugin 分离样式，image-webpack-loader 压缩图片。构建速度提升 40%，包体积减小 25%。
如何实现 Tree Shaking？如何处理小程序原生自定义组件？多环境配置如何管理？
避免过度优化导致开发调试困难；注意分包主包大小限制（主包 <2MB，总分包 <20MB）；公共模块抽取不当易导致主包膨胀。
📌 面试问题：小程序分包构建的原理及实现方案？
是否透彻理解分包加载机制；能否在构建层面设计合理拆分策略；是否具备大型小程序分包实战经验。
分包原理 → 构建配置 → 公共模块抽取 → 预加载策略。从为什么拆、怎么拆到构建如何实现，层层递进。
基于 Webpack 多入口机制，为每个分包独立配置 entry，通过 SplitChunksPlugin 将高频共用模块提取至主包。在 app.json 声明 subpackages 映射路径，搭配 preloadRule 实现分包预加载，首屏加载速度提升 35%。
独立分包与普通分包的核心区别？分包间如何共享状态与通信？分包预加载的触发时机如何设计？
公共模块抽取粒度要适中，避免主包体积失控；注意独立分包不能依赖主包资源；分包预加载不要嵌套过深，防止内存占用过高。
📌 面试问题：如何设计小程序的 CI/CD 流水线？
是否具备自动化工程思维；能否设计包含质量门禁的完整流水线；是否了解小程序平台 CI 工具链与安全实践。
代码提交 → 质量门禁 → 构建打包 → 预览上传 → 审核发布。按流水线阶段依次说明，强调自动化与安全控制。
基于 GitLab CI 设计流水线：push 触发 lint + UT，通过后 Webpack 构建，利用 miniprogram-ci 上传至管理后台自动生成预览码，集成 Robot 接口提交审核。全流程自动化，发布周期从 2 天缩短至 2 小时。
多环境配置（dev/staging/prod）如何管理？灰度发布如何实现？CI 中上传密钥/AppSecret 如何安全存储？
密钥禁止硬编码，使用 CI 变量或密钥管理服务；构建产物需做 diff 对比防止异常发布；设置包体积阈值告警，避免 CI 静默失败。
📊 构建工具对比：Webpack vs Gulp 小程序场景
🏗️ 项目案例：电商小程序工程化改造
电商零售小程序 · 工程化升级
50+ 页面 · 20+ 分包 · 日活 30w+ · 主包 2.1MB → 1.2MB
原有构建流程基于 Gulp 简单串联任务，无分包策略，主包体积 2.1MB 超限，构建耗时 8 分钟，发布全手动操作，迭代效率低。
Webpack5 + Gulp4 + Taro + GitLab CI + miniprogram-ci
- 分包拆分粒度：如何平衡主包体积与页面访问性能
- 公共模块抽取：避免重复打包导致总分包体积膨胀
- 构建速度优化：Webpack 多入口配置后增量构建耗时高
- CI 集成安全：上传密钥与 AppSecret 的安全存储与轮转
追问 1：分包拆分粒度如何把握？
按业务独立性和访问频次划分：高频通用页面放主包，低频独立业务拆为独立分包，共用逻辑抽离至 npm 包或主包公共模块。
追问 2：如何降低主包体积？
开启 Tree Shaking 移除未使用代码，将公共库移至 CDN，使用分包预加载替代主包承载，图片转为 WebP 格式并压缩。
追问 3：CI 中如何保证构建稳定性？
构建产物 diff 对比，包体积阈值告警，自动化回归测试，版本号自动管理，异常时触发回滚机制。
面对 50+ 页面、20+ 分包的大型电商小程序，我们按业务域拆分分包，Webpack SplitChunks 抽取共用模块，Gulp 处理图片压缩与雪碧图合成。主包体积从 2.1MB 降至 1.2MB，构建耗时从 8 分钟降至 3 分钟，CI 集成后实现每日持续交付，发布效率提升 75%。