在小程序项目不断壮大的过程中，开发效率逐渐成为了掣肘生产力的重要因素。尤其是使用 Taro 构建多端小程序时，随着页面数量的激增，项目启动缓慢、热更新延迟、微信预览时间过长等问题愈发明显。
为了缓解这些痛点，我开发了一款 VSCode 插件 ------ taro-config-easy ，用以自定义构建配置、提升 Taro 项目的开发效率。本插件已经在多个项目中落地实践，效果显著，下面是详细介绍。
一、背景
在我们日常迭代的 Taro 项目中，页面数量已达到 80+，导致了一系列性能问题：
- 本地启动耗时过长：随着页面增多，Taro 启动时间明显增加。
- 热更新慢：改动代码到页面 reload 的全链路超过 5 秒，在性能一般的机器上尤为明显。
- 微信预览缓慢：每次微信预览都需耗时 60 秒以上，极大影响开发节奏。
二、插件目标与收益
2.1 插件目标
- 封装可自定义 Taro 配置文件的 VSCode 插件
- 适配微信小程序、H5、手百等多端场景
- 支持按需选择页面参与构建，从根源优化构建效率
2.2 插件收益
通过在实际项目中的验证，插件带来了如下优化效果：
| 项目环节 | 使用前 | 使用后 | 提升比例 |
|---|---|---|---|
| 本地启动速度 | 4.68 秒 | 1.28 秒 | 提升 72% |
| 构建体积 | 80M | 6.2M | 缩小 92% |
| 热更新耗时 | 3.72 秒 | 455 毫秒 | 提升 87% |
| 微信预览耗时 | 83 秒 | 11 秒 | 提升 86% |
此外，项目包体减小也大幅降低了构建失败率。
三、插件接入方式
3.1 适用范围
目前插件已支持约 80% 的 Taro 项目，适用于常见的微信小程序 + H5 + 手百构建场景。
3.2 安装方式
可在 VSCode 插件市场搜索并安装：taro-config-easy
四、插件能力一览
4.1 构建简单页面
- 快速构建仅包含一个或少数页面的配置文件
- 极大提升本地开发与调试效率
4.2 构建复杂页面
- 支持主包 + 分包结构、tabBar 配置等复杂场景
- 支持配置项分组保存，便于下次一键复用
4.3 还原配置文件
- 支持一键恢复至完整项目配置，适用于打包、联调、上线前使用
4.4 其他能力
-
简单页面支持读取上次配置，一键复用
-
复杂页面支持配置保存至 VSCode 或项目中：
- 保存至 VSCode：不污染项目，适合个人开发
- 保存至项目 ：生成
.taroconfigeasy.json，适合多人协作开发
- 自动适配 VSCode 当前主题，提供更好的视觉体验
五、设计思路详解
本插件的设计核心围绕 Taro 项目的配置文件 ------ app.config.js。
5.1 构建机制
app.config.js是全局配置，会被 Taro 编译为app.json- 核心字段
pages是页面路径列表，影响构建的页面内容
5.2 插件实现逻辑
- 将原始的
app.config.js备份为demo.app.config.js - 用户选择需要构建的页面（支持 UI 交互选择）
- 插件根据选择项自动生成新的
app.config.js文件 - 构建时 Taro 将只处理该子集，极大加快启动与构建速度
