【uniapp】改善中大型uniapp小程序项目开发体验

uniapp 让我们轻松使用 vue 开发各种小程序。然而，我在实际开发中发现，随着代码数量的不断增长，有两个问题越发凸显：

• 编译时间不断拉长
• 编译产物越来越大

以我本机（i5-6500CPU @ 3.20GHz，内存16G，64位操作系统）uniapp项目为例：一次全量生产环境编译，花费时间3min+，生成小程序包共30M+。而在开发阶段还需要不停编译，既浪费大量时间，又降低开发体验。

本文记录了我的优化思路，如果你有更好/新的方案，欢迎在评论区留言。

路由文件拆分

项目文件较多，路由集中在一个文件内，不利于维护和扩展。

根据 uniapp 文件路径即路由的特性，我们将一组功能、一个活动等具有边界点的页面集生成一个路由文件route.json，在打包之前，再把这些散落四处的路由文件自动组装成一个完整的pages.json，供 uniapp 编译使用。

图片上传cdn

截至2021/11/16日，航班管家小程序打包后的总尺寸有30+M，其中图片占了近八成。将图片上传到 cdn 后，总包大小下降到不足10M。

打包缓存

uniapp 提供了开发环境的编译缓存功能。使用很简单，在package.json scripts 命令中增加UNI_USING_CACHE=true：

 "dev:wxapp-hbgj": "cross-env NODE_ENV=development UNI_USING_CACHE=true UNI_PLATFORM=mp-weixin vue-cli-service uni-build --watch",

在我windows机器上，开发环境编译由原来的3多分钟，降低到1分半钟。后面用 mac 测试，时间没有减少。怪不得官网都没提及这个优化。

单/多文件编译

由于项目无限膨胀，全量编译花费的时间直线增长，甚至出现了改一行代码，等1分钟的苦痛局面。为了提升开发幸福感、降低开发怒气值，增加了单/多文件编译模式。

注意，非 src 开头的文件夹名，默认编译src/projects/xxx，用例:

// 单个文件夹
npm run dev -- --module=jipiao

// 多个文件夹
npm run dev -- --module=jipiao,home,src/pages

页面下线

背景

每年都会有许多新活动上线，因为各种原因，我们又不能直接删除过期活动的代码/路由，这些内容白白增加了打包时长和总包大小。

解决方案

一个route.json文件包含一个活动的所有页面，在此基础上增加了startTime和endTime两个可选参数，代表活动的开始时间和结束时间。如果活动失效，则在打包时，将此活动下的每个页面替换成404内容。例如：

{
  "subPackages": [
    {
      "root": "projects/promotion",
      "startTime": "2020-08-01 00:00:00",
      "endTime": "2020-08-10 00:00:00",
      "pages": [
        {
          "path": "pages/august2020/pages/home",
        },
      ]
    }
  ]
}

子包组件引用

背景

目前航班管家小程序项目已经有20+个子包了，可能出现子包引用其他子包资源的情形。由于微信小程序的分包引用限制，我们要特别关注这种情况。虽然 uniapp 在打包时已经帮我们处理好了静态资源（js、css、图片）的引用关系，但对于子包组件引用，它依然无能为力（不警告、不报错）。

解决方案

uniapp 把每个有效的.vue打包成一个chunk，这个chunk包含很多有用的信息：文件路径、依赖等。我们遍历每个chunk及其依赖，和所有子包名一一匹配，可以发现当前chunk是否引用了其他子包的组件。最后打印这些错误引用关系，由开发者手动更改。