小程序分包加载

「爱情、让人受尽委屈。」 2021-09-03 04:13 454阅读 0赞

**分包加载的介绍**  
    大部分小程序都会由某几个功能组成，通常这几个功能之间是独立的，但会依赖一些公共的逻辑，并且这些功能通常会对应某几个独立的页面。那么小程序代码的打包，大可不必一定要打成一个，可以按照功能的划分，拆分成几个分包，当需要用到某个功能时，  
才加载这个功能对应的分包。

**在小程序启动时，默认会下载主包并启动主包内页面，如果用户需要打开分包内某个页面，客户端会把对应分包下载下来，下载完成后再进行展示**。

总结如下：

1. 打开小程序，默认先加载主包

2.进入分包页面时，再加载对应分包

采用分包加载，对开发者而言，能使小程序有更大的代码体积，承载更多的功能与服务；而对用户而言，可以更快地打开小程序，同时在不影响启动速度前提下使用更多功能.

**分包的划分**

在配置前首先需要开发者规划下各个分包需要容纳的内容，我们建议开发者按照功能划分的的原则，将同一个功能下的页面和逻辑放置于同一个目录下，对于一些跨功能之间公共逻辑，将其放置于主包下，这样可以确保在分包引用这部分功能时，这部分的逻辑一定存在。

在分包划分时，应该注意以下事项：

1.避免分包与分包之间引用上的耦合。因为分包的加载是由用户操作触发的，并不能确保某分包加载时，另外一个分包就一定存在，这个时候可能会导致+JS+逻辑异常的情况，例如报「"xxx.js"+is+not+defined」这样的错误；

2.一些公共用到的自定义组件，需要放在主包内.

**分包大小限制**

![20201120094813333.png][]

# #

**特征**

*  1.7.3 及以上基础库开始支持，不支持的版本默认使用整包的方式
 *  整个小程序所有分包大小不超过 4M，单个分包/主包大小不能超过 2M
 *  分包数量目前没有限制，也就是说你可以放N个分包，甚至每个页面一个分包
 *  入口页面/TAB页面必须在主包里

**关于主包**

*  第一次进入小程序，默认下载主包代码
 *  分包以外的所有代码，都会被打入主包
 *  分包内代码可以引用主包内代码

**关于分包**

1.因为存在资源依赖关系，微信的机制是先下载主包，后下载分包

3.分包可以引用自己包内、主包内的资源，不能引用其他分包内的资源

**坑**

1.小程序的打包机制仅仅是根据文件目录打包，分包内require/import的任何文件，只要不在同一个目录下面，都不会被打进分包，也就是说，类库及一些公共文件，只能放在主包里面，如果主包分包划分不好的话，主包的大小也很难降下来

2.安卓系统进入分包页面时，会出现一个丑陋的系统级的loading层，这一定程度上影响了安卓的体验

**历史入口兼容**

一个页面放入分包之后，路径会发生变化，例如详情页由/pages/detail变为/subPages/trade/detail，意味着如果用户访问了以前的page则得不到正确的页面响应（例如：分享出去的小程序卡片、二维码、公众号推送消息等），这些静态不可改变的历史入口怎么办？我们目前采用如下方案：

原来主包内的每个页面都保留，但代码只保留跳转逻辑，用户进来后立即跳到对应的分包页面，用户几乎是无感知的

这样也会产生一点小问题：这些跳转页面也占用一定的空间，接下来我们会优化成在onLaunch、页面跳转时进行判断，直接跳入正确的分包页面。

简单的简述

1.首先要配置好打包路径

2.其次subpageage的根目录不能再包含subpageage目录

3.tabBar页面，例如pages/index/index,pages/logs/logs必须在主包内

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dhb194dV81MjA_size_16_color_FFFFFF_t_70][]

[20201120094813333.png]: /images/20210813/8b113fceec9c4a95a3d6ab8bdc9e16b6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dhb194dV81MjA_size_16_color_FFFFFF_t_70]: /images/20210813/283d0e1e8b524c328442b61b981e6bc4.png