• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

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

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

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文件包含一个活动的所有页面,在此基础上增加了startTimeendTime两个可选参数,代表活动的开始时间和结束时间。如果活动失效,则在打包时,将此活动下的每个页面替换成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是否引用了其他子包的组件。最后打印这些错误引用关系,由开发者手动更改。


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
微信小程序和mongodb环境搭建发布时间:2022-07-18
下一篇:
微信小程序开发 上拉加载数据发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap