2048
登录
没  有  难  学  的  前  端
登 录
×
<返回上一级

小程序性能优化—最容易忽视的要素

性能优化作者:阿傻,

背景

提起小程序性能优化,可能会马上联想到的是减少setData或合并setData,或者是下面这张图

从寻找可优化点的角度考虑,可以把整个小程序的性能问题归档为两类,分别是Load 和 Runtime。有这两个分类,目标也可以出来了,比如加载时长不可超过1s,Runtime需要保持60fps。

接下来的内容只focus在加载这一块。

目前ZAKER在微信小程序和百度小程序已上线,同时正在扩展更多平台小程序,项目框架采用Taro。

自定义组件过多

小程序,和传统SPA应用很相似,所以很容易的把SPA的应用架构放入小程序中运用起来。比如耳熟能详的(stateless)无状态组件、(functional)业务组件。其实保留这样的设计和思考肯定没问题,但是需要留意的是,任何一个组件都会产生4个文件,swan、js、css、json,一家人最紧要齐齐整整。

看到很多网上的人提过,多使用自定义组件,因为自定义组件的更新只在组件内部进行,不受页面其他不能分内容的影响,组件的更新并不会影响页面上其他元素的更新。

听起来很合理,但是欠缺一个考虑,你创建出来的自定义组件真的有存在的意义?

在百度小程序的文档中有提及:

“减小包的体积可以减少包的下载时间。根据已经上线的小程序包的统计分析结果,我们建议开发者尽量将主包的体积控制在 1M 左右,包内的文件个数限制在 200 以内。除了体积之外,小程序包内的文件个数也直接影响到小程序包的解压速度。”

关键词:文件个数、解压速度。

所以优化的方法是,减少文件个数,提升解压速度。

下图的是文章底部的一块迷你评论内容块,里面有一个点赞按钮。

这个点赞按钮会被其他地方使用,比如子评论、点赞用户等等。为了解耦,很理所当然的设定为一个stateless组件。

但是在后期的排查发现,单纯一个点赞组件源代码仅1.3k,在Taro编译后却达到3.8k,体积增加了190%。

经过分析,在编译后会增加很多封装好的函数,为了初始化组件的检查、继承、引入依赖等等。

回头想想,为了一个stateless组件,增加近4k的小程序体积,不如直接融入当前的组件或页面更适合。

图片过大

UI提供的设计稿,设计的图标往往体积不大,可能是几百B,或者1~2k,但是这些图标还是会有压缩的空间。

比如下面的一张返回按钮,44px*44px,原图体积为587B

经过压缩,可以减少体积28%

再比如下面的一张朋友圈icon, 64px * 64px,原图体积1.7KB

经过压缩,可以减少体积33%

瞬间明白为什么女生都喜欢砍价。

分包

分包的教程很多,大部分都会是让你按功能点进行分包。我觉得只是对了一部分,另一部分是,需要根据用户行为进行分析,把最重要的页面放入主包。

分包这个功能会让开发人员忽略目的,比如ZAKER小程序中有首页、聚合页、多种详情页、评论页等等。

如果单纯根据功能进行分包,那么就会变为主包首页及首页的相关二级页面、分包聚合页、分包多种详情页、分包评论页。

使用了这样的分包策略,是可以提升用户从首页作为入口页的速度,同时也潜意识的假设了用户从首页进去后,会进入我们设想的页面,比如聚合页、搜索页。

但此刻还需要查看小程序的用户行为数据,判断是否大部分用户都把首页作为入口页?

微信下一步大力发展搜一搜,核心是内容、品牌、服务三方面,ZAKER也同时作为首批接入搜一搜内容服务,同时百度小程序将搜索词推荐、语音搜索与智能小程序单卡等精准搜索场景与自然搜索结果、功能聚合卡片等泛搜索需求场景进行接入。

所以在ZAKER的用户行为来看,大部分的用户是直接到达小程序里更具体的页面。

假设入口页里,文章详情页占70%的用户,首页占20%,其他页面占10%,那么根据一开始分包策略套入,70%的用户在进入文章详情都必须加载主包(首页)的内容,那么其实非常浪费的。

根据上面的假设,我们对分包策略进行了调整,把文章详情页直接加入主包,避免了从主包加载后才触发加载分包的行为。

进一步优化分包(仅支持百度小程序)

在上面的调整后,确实是降低了用户启动小程序时,需要加载的小程序内容。但具体思考一下,假设用户在搜索中访问了小程序的某篇文章,那么此刻首页的所有组件、样式的加载,都是多余的。

那么可以把首页使用的组件和样式都打包,成为新分包吧!

经过测试,首页不被访问,组件包就不会被下载,同时主包体积包也会有所缩小。同时在首页中使用上并没有存在任何问题。

开始已经提及到,该方法只适合于百度小程序,对于微信小程序不生效。在Taro中,app.js是无法根据不同平台提供不同文件的引用。那么需要使用Taro中集成的 babel-plugin-preval工具,在构建前根据条件改变app.js的config属性(app.json)

class App extends Component {
config = preval`
  if (process.env.TARO_ENV === ‘swan’) {
    // 百度小程序的app.json
	module.exports = {
	  pages:[
	    // 主包描述
	  ],
	  subPackages:[
	   // 分包描述
	  ]
	}
  }else {
	// 其他小程序的app.json
	module.exports = {
	  pages:[
	    // 主包描述
	  ],
	  subPackages:[
	    // 分包描述
	  ]
	}
  }
`
  componentWillMount() {
  }
  componentDidMount () {
  }

}
复制代码

以上是针对小程序包体积的一些优化内容,目的就是如何让小程序的体积降低,文件减少,启动小程序时仅加载真正需要的内容。

本文来源于网络:查看 >
评论
点击刷新
评论
×添加代码片段