启动性能优化最直接的手段是降低代码包大小,代码包大小直接影响了下载耗时,影响用户启动小组件时的体验。
开发者可以采取以下手段优化代码包体积:
推荐所有小组件使用
使用 分包加载 是优化小组件启动耗时效果最明显的手段。建议开发者按照功能划分,将小组件的页面按使用频率和场景拆分成不同分包,实现代码包的按需加载。
分包加载具有以下优势:
承载更多功能:小组件单个代码包的体积上限为 2M,使用分包可以提升小组件代码包总体积上限,承载更多的功能与服务。 降低代码包下载耗时:使用分包后可以显著减少启动时需要下载的代码包大小,在不影响功能正常使用的前提下,有效降低启动耗时。 降低小组件代码注入耗时:小组件启动时会一次性注入全部的开发者代码,使用分包后可以降低注入的代码量,从而降低注入耗时。 降低页面渲染耗时:使用分包可以避免不必要的组件和页面初始化。 降低内存占用:分包能够实现页面、组件和逻辑较粗粒度的按需加载,从而降低内存的占用。 此外,结合分包加载的几个扩展功能,可以进一步优化启动耗时:
小组件中的某些场景(如广告页、活动页、支付页等),通常功能不是很复杂且相对独立,对启动性能有很高的要求。独立分包可以独立于主包和其他分包运行。从独立分包页面进入小组件时,不需要下载主包。建议开发者将部分对启动性能要求很高的页面放到特殊的独立分包中。
在使用「分包加载」后,虽然能够显著提升小组件的启动速度,但是当用户在使用小组件过程中跳转到分包内页面时,需要等待分包下载完成后才能进入页面,造成页面切换的延迟,影响小组件的使用体验。分包预下载便是为了解决首次进入分包页面时的延迟问题而设计的。
独立分包和分包预下载可以配合使用,获得更好的效果,详情请参考独立分包与分包预下载教程
「分包异步化」将小组件的分包从页面粒度细化到组件甚至文件粒度。这使得本来只能放在主包内页面的部分组件和代码逻辑可以剥离到分包中,并在运行时异步加载,从而进一步降低启动所需的包大小和代码量。分包异步化也能有效解决主包大小过度膨胀的问题。
在 app.json 中通过 usingComponents 全局引用的自定义组件和通过 plugins 全局引入的插件,会包含在小组件的主包中,增加主包的包大小。
如果自定义组件只在某个分包的页面中使用,应定义在页面的配置文件中 如果插件只在某个分包的中使用,请仅在分包中引用插件 全局引入的自定义组件会被认为是所有分包、所有页面都需要的,会影响「按需注入」的效果和小组件代码注入的耗时。
建议开发者在代码包内的图片一般应只包含一些体积较小的图标,避免在代码包中包含或在 XHSSS 中使用 base64 内联过多、过大的图片等资源文件。这类文件应尽可能部署到 CDN,并使用 URL 引入。
除了工具默认忽略或开发者明确声明忽略的文件外,小组件打包会将工程目录下所有文件都打入代码包内。意外引入的第三方库、版本迭代中被废弃的代码或依赖、产品环境不需要的测试代码、未使用的组件、插件、扩展库,这些没有被实际使用到的文件和资源也会被打入到代码包里,从而影响到代码包的大小。
在使用打包工具(如 Webpack、Rollup 等)对小组件代码进行预处理时,可以利用 tree-shaking 等特性去除冗余代码,也要注意防止打包时引入不需要的库和依赖。