手把手带你看看小程序如何优化？（实践总结）

手把手带你看看小程序如何优化？（实践总结）
小程序如何优化？本篇文章给大家总结一下小程序优化实践，看看小程序优化项，希望对大家有所帮助！

小程序如何优化？本篇文章给大家总结一下小程序优化实践，看看小程序优化项，希望对大家有所帮助！

小程序运行过程

我们先来梳理一下小程序的运行原理，磨刀不误砍柴功。

一图胜千言：

建议大家认真去理解图中的内容，对于小程序开发以及优化方向都有较有力的理论支持。

优化项

1. 合理的使用分包

微信小程序的主要特点是启动快速，为了这一特性，官方因此限制了包的大小，上限为 2M。

分包是小程序优化的第一要务，能有效提高小程序启动速度，以及页面打开速度。

包分为【主包】【普通分包】【独立分包】。

【主包】应该只放置启动页或者TabBar页面。

【普通分包】放置非TabBar页面的其他页面，推荐按照页面数量或者模块划分多个分包，减少分包的大小，当用户进入对应分包页面的时候才会去下载这个包，这也实现了包的按需加载，避免了资源浪费。当小程序从普通分包中的某个页面的时候启动时，需要首先下载主包，然后在下载分包。

【独立分包】放置一些独立性较高的页面，当小程序从独立分包中的页面启动时，只会下载独立分包，从而大大提高小程序启动速度，当用户进入TabBar页面或者其他普通分包页面才回去下载对应的包。

独立分包中不能有任何全局的东西，包括组件，登录等，引入任何其他包中的资源都会出错。

作者建议梳理好页面和功能再分包，分包的界限并不是包的大小超过了 2M，而是要灵活的根据业务和功能来进行划分。在如今正常网络情况下，2M 的分包和 500KB 的分包的下载可能用户感知差距不会特别大，但是如果是在弱网环境下，这两者会造成用户白屏的时间上就有很大的差距（亲身经历，可以说是掏心掏肺了）。

比如，我会将那些可以由TabBar页面直接进入且频率较高的二级页面放入一个分包，然后其他更深层次的页面或者那些不是那么重要的页面分成一个包，又或者将整个订单业务模块的页面分成一个包。

包分好了，自然不能少了【分包预下载】。可以按照官网的规则进行配置，当用户进入某个页面时，提前下载包。

2. 按需注入

小程序下载完包之后，会将打开页面所在包的全部JS合并注入，一些未访问的页面以及未用到的自定义组件也会被注入到运行环境当中。影响注入耗时和内存占用。我们希望的是当包下载完成后，只注入我们即将打开的页面的代码就行。

这也是小程序启动或跳转进入分包页面影响白屏时间的一点。

{ "lazyCodeLoading" : "requiredComponents"}