码code | 小程序运行卡顿?“分包”让启动速度6到飞起

转载来源:微信开发者

原作者:special、jaxon

前言:

小程序自开放以来,各种功能和服务体验在不断完善,其中小程序启动和运行速度更是提升用户体验必不可少的一环。今期我们为大家分享微信小程序是如何在满足多样化功能需求的同时,解决小程序运行卡顿的问题。

01.分包加载

技术背景和功能:

为了获得“秒开”的体验,小程序刚上线的时候代码包大小被限制在1MB以内,但对于目前的功能和市场需求,这个代码体积已经远远不够了。「分包加载」就是为了应对这种矛盾而提出的。


小程序内部不同的功能通常会对应几个独立的页面,因此代码的打包可以按功能拆分成多个分包,并根据用户需要使用的时候才加载,从而实现在拥有更大的代码体积去承载多种功能的同时保证启动速度。

分包的划分:

建议按照功能划分的原则,将同一个功能下的页面和逻辑放置于同一个目录下,对于一些跨功能之间的公共逻辑以及一些公共用到的自定义组件,将其放置于主包下。另外还需要避免分包与分包之间引用上的耦合,避免导致JS逻辑异常的情况出现,例如报「 “xxx.js” is not defined 」这样的错误。

分包的配置:

当理清了分包的划分后,就可以进行分包的配置了,这一步并不复杂。假设支持分包的小程序目录结构如下:


├─app.js

├─app.json

├─app.wxss

├─packageA

│  └─ pages

         ├─ cat

         └─ dog

├─packageB

   └─ pages

            ├─ apple

            └─ banana

├─pages

  ├─ index

│  └─ logs

└─ utils

开发者通过在 app.json subPackages 字段声明项目分包结构:

{

 “pages”: [

   “pages/index”,

   “pages/logs”

  ],

  “subPackages”: [

     {

       “root”“packageA”

       “pages”: [

          “pages/cat”,

          “pages/dog”

      ]

   },{

     “root”“packageB”,

     “pages”: [

        “pages/apple”,

        “pages/banana”

      ]

    }

  ]

}

注意事项:

微信6.6.0版本开始支持分包加载,低于这个版本的客户端则做了兼容处理,依然采取整包加载的方式加载,建议尽量控制代码包的大小。

02.独立分包

技术背景和功能:

小程序中的某些场景(如活动页、广告页、支付页等),通常功能不是很复杂且相对独立,在现有的方案中启动这些页面需要依赖整个主包的下载,如果页面在分包中,还需等待分包的下载,这样就限制了启动性能的进一步提升。若通过代码重构重新分包,不仅工作量大,而且会影响其他分包的使用体验。

独立分包可以独立于主包和其他分包运行,从独立分包中的页面进入小程序时,无需下载主包,只有当用户点击普通分包或主包内页面时,主包才会被下载。这样当小程序从独立分包页面启动时,只需要下载分包就能够直接运行,大幅度提高分包页面的启动速度,实现小程序秒开。

配置方法:

独立分包的配置方法十分简单,只需要在原有分包配置的基础上定义 independent 字段,即可将一个分包设置为独立分包,例如:


   “subPackages”: [{

     “root”: “moduleA”,

     “page”: [

       “pages/pear”

       “pages/pineapple”

      ],

     “independent”: true

    }]

   }

由于小游戏中没有页面的概念,也没有小程序中多种入口的使用场景,因此小游戏目前没有支持独立分包。

注意事项:

独立分包不依赖主包独立使用,因此在加载流程和运行环境上与普通分包有一定的差异。除了分包本身的限制外,独立分包还有以下限制:

■独立分包中不能依赖主包和其他分包中的内容,包括 js 文件、模板、wxss、自定义组件等;

■App只能在主包内定义,独立分包中不能定义 App,会造成无法预期的行为;

■独立分包中暂时不支持使用插件。

03.分包预下载

技术背景和功能:

使用「分包加载」后,当用户在使用小程序过程中跳转到分包内页面时,仍需要等待分包下载完成后才能进入页面,从而造成页面切换的延迟。分包预下载便是为了解决这个问题而设计的,在用户进入分包页面之前就预先完成分包下载,尽可能降低进入分包页面的延迟。

分包预下载功能目前首先推出了「基于配置」的方式,使用简单并且能够方便控制预下载的使用情况。开发者可以预先配置某个页面可能会跳转到的分包(对于独立分别,也可以预下载主包),在进入小程序某个页面时,由基础库在后台自动预下载可能需要的分包。

配置方法:

开发者可以通过在 app.json 中增加 preloadRule 字段,控制进入某个页面时进行预下载的分包,并设置触发预下载的网络环境。

{

  “pages”: [“pages/index”],

  “subpackages”: [

   {

    “root”“important”,

    “pages”: [“index”],

   },

   {

  “root”“sub1”,

    “pages”:[“index”],

   },

   {

    “name”“hello”,

    “root”“path/to”,

    “pages”:[“index”]

   },

   {

    “root”“sub3”,

    “pages”: [“index”]

   },

   {

    “root”“indep”

    “pages”: [“index”],

    “independent”: true

   }

  ],

   “preloadRule”{

    “pages/index”{

      “network”“all”

      “packages”[“important”]

    },

    “sub1/index”: {

      “network”“wifi”

      “packages”: [“hello”,”sub3”]

    },

    “sub3/index”: {

      “packages”: [“path/to”]

    },

   “index/index”: {

      “packages”: [“_APP_”]

    }

  }

}

注意事项:

过度的预下载不仅会破坏分包按需使用的原则,还会过度占用用户的存储空间和消耗数据流量,所以小程序会对预下载的大小和网络进行一定的限制,同一个分包中的页面预下载总大小不得超过2M。

小结:

目前,小程序代码包的大小上限已经提升至8M,独立分包和分包预下载进一步丰富了分包加载的功能和使用场景,使小程序能承载更加多样化、人性化的服务。相信未来技术方案,不断延伸微信小程序的可能性。

关于分包加载的详细使用方法,可以点击阅读原文查看。如果有其他问题,欢迎在评论区留言。

微信极客 WeGeek,是微信官方推出的小程序开发者服务平台,通过形式多样的大赛、专业性强的线下活动、干货满满的技术解读,为小程序开发者提供全方位的技术交流舞台。同时,WeGeek 连接品牌商户与小程序开发者,为小程序生态提供了一个更高效的交流平台。欢迎更多的小程序开发者及行业大咖与 WeGeek 互动,促进小程序生态的繁荣发展。

推荐阅读:

来源:微信极客WeGeek,本文观点不代表自营销立场,网址:https://www.zyxiao.com/p/4028

侵权联系 投诉举报
返回顶部