小程序代码包体积如何优化

想要微信小程序的用户启动体验更快更优,少不了做一些开发优化工作,其中,代码包体积优化可以从以下方面着手。

小程序代码包体积优化建议

1.使用分包加载

首先推荐小程序开发者使用分包加载手段来优化小程序启动耗时的问题,可以按照功能划分,将小程序的页面按使用频率和场景拆分成不同分包,实现代码包的按需加载,优化效果更明显。另外,分包加载的几个扩展功能都很好用,可以用独立分包、分包预下载、分包异步化等都可以更好的帮助优化主包体积大小。

2.去除非必要的自定义组件和插件

在开发过程中,避免不了使用各种全局自定义组件及小插件,而这些插件会在小程序启动时随主包一起下载及启动,同时注入JS代码,这样会对整个的启动耗时有所影响。因此建议小程序开发者在以下情形中做出优化:

  •   如果自定义组件只在某个分包的页面中使用,应定义在页面的配置文件中
  •   全局引入的自定义组件会被认为是所有分包、所有页面都需要的,会影响「按需注入」的效果和小程序代码注入的耗时。
  •   如果插件只在某个分包的中使用,请仅在分包中引用插件
  •   如果确实需要在主包中或被多个分包使用的插件,仍可以考虑将插件置于一个分包,并通过「分包异步化」的形式异步引入。

3.控制资源文件大小

小程序代码包在下载时会使用ZSTD算法进行压缩,图片、音频、视频、字体等资源文件会占用较多代码包体积,并且通常难以进一步被压缩,对于下载耗时的影响比代码文件大得多。

建议开发者在代码包内的图片一般应只包含一些体积较小的图标,避免在代码包中包含或在WXSS中使用base64内联过多、过大的图片等资源文件。

4.优化图片和静态资源

图片通常是体积最大的部分,建议从以下方面操作:

  •   压缩图片:使用工具如TinyPNG、ImageOptim、Squoosh等在开发阶段手动压缩。
  •   选择合适的格式:使用WebP格式替代PNG/JPG,通常能减少25%-35%的体积。小程序基础库已广泛支持WebP。对于简单图标,优先使用SVG(矢量、无损缩放)。
  •   控制图片尺寸:不要使用一张超大的图然后通过CSS缩小显示。根据实际显示尺寸来提供图片。
  •   使用网络图片:将不常变动的大型图片、背景图等放到CDN上,通过https://链接引用,而不是放在代码包里。这是减少代码包体积最直接的方法之一。

5.及时清理内存

定期及时清理内存也很重要,无论是资源还是文件,定期清理都能省出空间。建议使用微信开发者工具提供的「代码静态依赖分析」,不定期地分析代码包的文件构成和依赖关系,以此优化代码包大小和内容。对于仅用于本地开发调试,不应包含在小程序代码包的文件,可以使用工具设置的packOptions.ignore配置忽略规则。

以上就是最常见的小程序代码包优化方法,给大家做个参考,除此之外,还有利用构建工具自动化等手段,做好小程序代码包优化,能够有效缩短启动耗时,从而提升用户体验。


声明:本站部分文章来源于互联网,如有侵犯作者著作权,请及时与我们联系。

木鱼小铺小程序