uniapp分包

一、为什么要分包

因为小程序有体积和资源加载限制，优化小程序的下载和启动速度

二、主包和分包

主包：即放置默认启动页面/TabBar 页面，以及一些所有分包都需用到公共资源/JS 脚本

分包：是根据pages.json的配置进行划分

注意：加载小程序的时候先加载主包，当需要访问分包的页面时候才加载分包内容，分包的页面可以访问主包的文件，数据，图片等资源，在小程序启动时，默认会下载主包并启动主包内页面，当用户进入分包内某个页面时，会把对应分包自动下载下来，下载完成后再进行展示。此时终端界面会有等待提示。

三、配置pages.json

• 在pages.json中新建数组"subPackages"，数组中包含两个参数：
• root：为子包的根目录，
• pages：子包由哪些页面组成，参数同pages；

注意：主包和分包是不能再同一目录下，在构建uniapp项目时，可以考虑一下目录结构，以便后期进行分包。

四、注意事项

整个小程序所有分包大小不超过 20M 单个分包/主包大小不能超过 2M

• 合理规划分包，开始时就细分分包，尽量少在主包放大文件
• 减少项目的层级，合理归分层级，同时可以提高项目的运行速度
• 静态资源全部cdn加载
• 公共组件库
• 公共CSS库，尽量做到一次代码多次使用，避免重复多余的CSS
• 使用稳定全面的UI库，可以大幅度减少CSS的用量
• 外部较大的js文件，尽量减少使用，非用不可的话全部放到分包里去加载使用
• 主包不可以引用分包内文件，分包仅可引用自身目录内的文件，分包与分包间文件无法互相引用
• 要清楚的是分包是一种不得已而为之的手段，确保在分包前项目中静态资源已优化完毕，且没有大量注释或无用代码也是一种手段
• 静态资源尽量放到服务器上 和公司后端人员沟通 将图片地址尽量放到服务器上 就不占用本地资源空间

五、目录搭建

• components:公共组件（供主包引用）
• page_后跟拼音的都是分包
• 分包里的components是单个分包自己的组件目录，分包vue页面的引用只能是在自己page_zhaoshang分包目录下才可以引用
• pages是主包，里面都是启动页面/TabBar 页面
• static里放的是公共静态资源，图片类

六、demo

1. 在manifest.json中开启分包

"optimization": {
  "subPackages": true //是否启用分包优化
},
"runmode": "liberate" // 开启分包优化后，必须配置资源释放模式

2. 有几个tabBar页面新建几个目录，一定要和pages同级

3. 然后把页面抽离出来

4. 然后再pages.json中配置

5. 最后pages里就就不用配置它们了，只留tabBar切换页

6. 如果最后要跳分包的页面就是/pagesA/login/login

uni.navigateTo({
  url: '/pagesA/login/login' // 因为这个页面在pagesA下面
})