多次论证, 数月研发, 我们重写部分 vue 底层, 重构 uni-App 框架, 实现了微信端性能翻倍及更多 Vue 语法支持.
背景
uni-App 在初期借鉴了 mpvue, 实现了微信小程序端的快速兼容, 感谢美团点评团队对于开源社区的贡献!
随着使用 uni-App 的开发者愈来愈多, 业务复杂度不断增加, 不少开发者抱怨 uni-App 支持的 vue 语法少, 某些场景性能有问题(特别是页面存在复杂组件的情况), 这些问题其实是由 mpvue 的实现机制导致的, 我们以复杂组件的性能问题为例简要说明.
mpvue/wepy 等框架诞生之初, 微信小程序尚不支持自定义组件, 无法进行组件化开发; mpvue/wepy 为解决这个问题, 创造性的将用户编写的 Vue 组件, 编译为 WXML 中的模板(template), 这样变相实现了组件化开发能力, 提高代码复用性, 这在当时的技术条件下是很棒的技术方案. 但如此方案, 也导致 Vue 组件中的数据会被编译为 Page 中的数据, 对组件进行数据更新也会基于路径映射调用 Page.setData. 特别是组件较多, 数据量交大的页面中, 每个组件的局部更新会引发页面级别的全局更新, 产生极大的性能开销.
微信后来推出的自定义组件, 其实支持组件级别的局部更新, 经验证, 我们发现组件级别的数据更新, 相比页面全局更新, 有大幅性能提升.
另外, mpvue 在 Vue 层进行的 vnode 对比及数据 diff 计算不彻底, 也会消耗部分性能.
基于这些原因, 我们开始了微信端的框架重写工作.
新版特性
性能翻倍
新版 uni-App 调整重写了部分 vue.js 底层实现, 主要包括:
基于小程序自定义组件实现 Vue.JS 的组件化开发
Vue 层取消 vnode 对比
更彻底的 diff 计算, setData()通讯数据量更少
新框架重写后, 我们构造了如下测试模型:
构造一个列表界面, 每个列表项为一个自定义组件
上拉加载触发数据更新, 每次从本地读取静态数据, 屏蔽网络差异
触发数据更新计时开始, 页面渲染完毕计时结束, 求其时间差作为对比指标(耗时, 单位为毫秒)
然后分别使用新, 老框架, 在同一台手机 (vivo nex) 上进行多次测试, 求其平均值, 获取如下结果:
组件数量 | 老框架 (mpvue) | 新框架 |
---|---|---|
200 | 204ms | 129ms |
400 | 280ms | 139ms |
800 | 341ms | 180ms |
1000 | 653ms | 196ms |
从测试数据来看, 新框架在复杂页面下, 性能有翻倍提升! 特别是数据越多, 组件越复杂的页面, 性能提升越大!
更多 Vue 语法支持
我们同时增强了 uni-App 编译器, 支持了更多 Vue 语法, 详细如下:
支持过滤器 filter
支持比较复杂的 JavaScript 渲染表达式
支持在 template 内使用 methods 中的函数
支持 v-html (同 rich-text 的解析)
组件支持原生事件绑定, 如:@tap.native
体验方式
目前新框架在微信端已完成开发, 其他小程序和 App 的编译器仍为旧版. 我们放出群测版, 邀请开发者在微信端抢鲜体验.
开发者按照如下方式创建 vue-cli 并创建 uni-App 项目, 编译发行到微信小程序:
- # NPM script
- # 全局安装 vue-cli
- $ NPM install -g @vue/cli
- # 创建 uni-App 项目, 会提示选择项目模板, 初次接触建议选择 hello uni-App 模板
- $ vue create -p dcloudio/uni-preset-vue my-project
- # 进入项目目录
- $ cd my-project
- # dev 模式, 编译预览
- $ NPM run dev:mp-weixin
- # build 模式, 发行打包
- $ NPM run build:mp-weixin
新老版本切换
为了不影响老项目, uni-App 群测版目前同时内置新, 老两个框架, 且默认使用老框架, 开发者可通过配置 manifest.JSON -> mp-weixin -> usingComponents 节点启用新编译框架, 如下:
- // manifest.JSON
- {
- // ...
- /* 小程序特有相关 */
- "mp-weixin": {
- "usingComponents":true // 启用新框架编译, 默认为 false
- }
- }
如果你使用了新增的 vue 语法, 请注意只有 H5 和微信支持这些新语法, 编译到其他平台时, 要用条件编译处理.
Tips:
为保证自定义组件兼容性, 运行到微信开发者工具时, 建议将微信基础库设置为最新版本.
体验新框架时, 有任何问题或者建议, 欢迎到 GitHub 提交 https://github.com/dcloudio/uni-app/issues
现状与未来
春节过后, uni-app1.6 版本发布, 新增字节跳动小程序平台支持; 至此, 实现一套代码, 7 端发布! 7 端分别包括: App(iOS/Android), 小程序(微信 / 支付宝 / 百度 / 字节跳动),H5 平台, 见下图:
大量开发者热情涌入 uni-App 社区, 目前已有几十个 uni-App 交流群, 下图为一个 500 人的 QQ 交流群, 创建 2 天即满群, 开发者的热情可见一斑.
目前, 每天新创建的 uni-App 项目 (包括测试项目) 达数千个, 案例过万, 部分案例见 https://uniapp.dcloud.io/case . 与 Taro 等框架清一色微信小程序案例相比, uni-App 的跨端案例要丰富很多.
在小程序跨端框架中, uni-App 也许是使用人数最多, 跨端案例最丰富的前端框架.
近期, 为活跃 Vue 多端开发生态, 由 uni-App 与 mpvue 团队联合举办的插件开发大赛正式开始了! 欢迎各位开发者踊跃参与, 制造轮子, 造福社区的同时, 顺手再拿个奖品(iPhone Xs Max,4K 显示器等奖品多多), 一举多得 ^_^, 点击了解详情 http://ask.dcloud.net.cn/article/35700 .
接下来, uni-App 团队将继续全力奔跑, 在如下方面快速完善:
uni-App 新框架兼容到其它平台
uni-ui 跨端 UI 库精致化
App 端引入更多原生渲染, 提升系能体验
周边生态进一步完善, 比如行业模板, 跨端统计等
"为开发者而生", 不是口号, 而是定位.
uni-App 团队将一如既往的为开发者解决开发痛点, 提升开发效率!
来源: https://juejin.im/post/5c919465e51d455c835448c1