vue 小程序分包

uniapp微信小程序分包_uniapp 微信小程序分包-CSDN博客

目录

一. 分包的概念

1. 什么是分包

2. 分包的好处

3. 分包后项目的构成

4. 分包加载规则

5. 分包体积限制

二. 分包的方法

1. 分包后的目录结构

2. 配置manifest.json

3. 配置pages.json

4. 全局修改分包文件路径

一. 分包的概念
1. 什么是分包
分包指的是把一个完整的小程序项目，按照需求划分为不同的子包，在构建时打包成不同的分包，用户在使用时按需进行加载。
2. 分包的好处
1. 优化小程序首次启动多个消灾时间
2. 方便团队开发，解耦协作
3. 分包后项目的构成
一个主包：一般只包含项目的启动页面或 TabBar 页面、以及所有分包都需要用到的一些公共资源
多个分包：只包含和当前分包有关的页面和私有资源
4. 分包加载规则
在小程序启动时，默认会下载主包并启动主包内页面，当用户进入某个页面时，客户端会把对应分包下载下来，下载完成后再进行展示
5. 分包体积限制
1. 整个小程序所有分包大小不超过20M（主包＋所有分包）
2. 单个分包／主包大小不能超过2M
二. 分包的方法
1. 分包后的目录结构
    ├── pages       // 主包
    │   ├── index
    │   └── logs
    ├── packageA        // 分包A
    │   └── pages
    │       ├── cat
    │       └── dog
    ├── packageB        // 分包B
    │   └── pages
    │       ├── apple
    │       └── banana
    ├── manifest.json       // 配置项
    └── pages.json      // 页面路径
2. 配置manifest.json

"mp-weixin":{
    "optimization":{
      "subPackages":true // 开启分包优化
    }
}

3. 配置pages.json
在pages.json中新建"subPackages"数组，"preloadRule"对象

1. "subPackages"数组中包含两个参数：
    1.root：为子包的根目录
    2.pages：子包由哪些页面组成，参数同pages
注意：主包和分包是不能在同一目录下，所以在构建项目时，要考虑目录结构，以便后期进行分包

2. "preloadRule"中，key 是页面路径，value 是进入此页面的预下载配置
    1. network指定网络下预下载可选wifi/all（非必填）
    2. packages进入也买你后预下载的分包（必填）
 

{
  "pages": ["pages/index"],   // 主包内页面
  "subpackages": [
    {
      "root": "packageA",    // 分包A
      "pages": [
        {
          "path" : "pages/cat"
        },
        {
          "path" : "pages/dog"
        }
      ]
    },
    {
      "root": "packageB", // 分包B
      "pages": [
        {
          "path" : "pages/apple"
        },
        {
          "path" : "pages/banana"
        }
      ]
    }
  ],
  "preloadRule": {    // 分包预载配置 
    "pages/index": {    // 在进入小程序pages/index页面时，由框架自动预下载分包A、分包B
      "network": "all",
      "packages": ["packageA","packageB"]
    }
  }
}

4. 全局修改分包文件路径

webstorm 可通过 ctrl+shift+R 替换所有路径