小程序的分包

合理使用分包加载

使用 分包加载 是优化小程序启动耗时效果最明显的手段。建议开发者按照功能划分，将小程序的页面按使用频率和场景拆分成不同分包，实现代码包的按需加载。

分包加载具有以下优势：

• 承载更多功能：小程序单个代码包的体积上限为 2M，使用分包可以提升小程序代码包总体积上限，承载更多的功能与服务。
• 降低代码包下载耗时：使用分包后可以显著减少启动时需要下载的代码包大小，在不影响功能正常使用的前提下，有效降低启动耗时。
• 降低小程序代码注入耗时：若未开启按需注入，小程序编译时会将所有 js 文件打包成同一个文件一次性的注入，并执行所有页面和自定义组件的代码。分包后可以降低注入和实际执行的代码量，从而降低注入耗时。
• 降低页面渲染耗时：使用分包可以避免不必要的组件和页面初始化。
• 降低内存占用：分包能够实现页面、组件和逻辑较粗粒度的按需加载，从而降低内存的占用。

此外，结合分包加载的几个扩展功能，可以进一步优化启动耗时：

1.1 独立分包

小程序中的某些场景（如广告页、活动页、支付页等），通常功能不是很复杂且相对独立，对启动性能有很高的要求。独立分包可以独立于主包和其他分包运行。从独立分包页面进入小程序时，不需要下载主包。建议开发者将部分对启动性能要求很高的页面放到特殊的独立分包中。

1.2 分包预下载

在使用「分包加载」后，虽然能够显著提升小程序的启动速度，但是当用户在使用小程序过程中跳转到分包内页面时，需要等待分包下载完成后才能进入页面，造成页面切换的延迟，影响小程序的使用体验。分包预下载便是为了解决首次进入分包页面时的延迟问题而设计的。

独立分包和分包预下载可以配合使用，获得更好的效果，详情请参考独立分包与分包预下载教程

1.3 分包异步化

「分包异步化」将小程序的分包从页面粒度细化到组件甚至文件粒度。这使得本来只能放在主包内页面的部分插件、组件和代码逻辑可以剥离到分包中，并在运行时异步加载，从而进一步降低启动所需的包大小和代码量。

第一个：常规分包（程序一上来就下载的一般是主包，）

开发者通过app.json中subpackages字段声明项目分包结构。

特点：

a) 加载小程序的时候先加载主包，当需要访问分包的页面时候才加载分包内容

b) 分包的页面可以访问主包的文件，数据，图片等资源

c) 主包：

i.主包来源： 除了分包以外的内容都会被打包到主包中

ii.通常放置启动页/tabBar 页面

1.在小程序中新建两个目录songPackage,otherPackage,用来放分包。

2.把recommendSong和songDetail页面放到songPackage包/pages/里，other放到otherPackage/pages/中，其他全部是主包里的。

3.在app.json中添加subpackages字段，

"subpackages": [

{

"root": "songPackage",

 "pages": [

        "pages/recommendSong/recommendSong",

        "pages/songDetail/songDetail"

        ]

    },

{

"root": "otherPackage",

    "pages": [

        "pages/other/other"

        ]

}

]

4.把分好包的，原先app.json中的pages路径删掉。

5.基本信息-本地代码，就可以看到分好包了

6.把分了包的对应的之前路由跳转的路径，各种路径再修改下。

第二个：独立分包

1. 设置 independent 为 true

2. 特点:

a) 独立分包可单独访问分包的内容，不需要下载主包

b) 独立分包不能依赖主包或者其他包的内容

3. 使用场景

a) 通常某些页面和当前小程序的其他页面关联不大的时候可进行独立分包

b) 如：临时加的广告页 || 活动页

分包预下载

1. 配置

a) app.json 中设置 preloadRule 选项

b) key(页面路径): {packages: [预下载的包名 || 预下载的包的根路径])}