阿狗工具

1.什么是分包

分包就是指把一个完整的小程序项目，按照需求划分不同的子包，在构建时打包成不同的分包，用户在使用时按需进行加载。

为什么要分包：因为微信小程序上线时，要求整个小程序所有分包大小不超过16M(主包+所有分包，单个分包、主包大小不能超过2M)。如果你主包大小大于2M则需要做一些处理，比如分包一些大的资源（如：图片）需放在服务器上，然后从服务器上选取所用的图片。

分包后项目的构成：

• 小程序由一个主包+多个分包
• 主包：一般只包含项目的启动页面或TabBar页面，以及所有分包都需要用到的一些公共资源
• 分包：只包含和当前分包有关的页面和私有资源

主包

分包

分包内部

2.普通分包

配置普通分包：

在app.json的subpackages节点中声明分包的结构

name:"分包别名"通过这个来配置分包别名

//app.json==》设置主包和分包的位置。

{
    //主包所有的页面
  "pages": [
    "pages/index/index",
    "pages/notice/notice",
    "pages/preferential/preferential",
    "pages/cart/cart",
    "pages/my/my"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "唛丫唛",
    "backgroundColorTop": "#FFB025",
    "navigationBarTextStyle": "black",
    "navigationStyle": "custom"
  },
    //通过subpackages节点，声明分包的结构
  "subpackages": [
    {
        //第一个分包的根目录
      "root": "advance",
        //分包的别名（可有可无）
       "name":"adv2",
        //当前分包下，所有页面的相对存放路径
      "pages": [
        "pages/index/index",
        "pages/delivery/delivery",
        "pages/list/list",
        "pages/detail/detail"
      ]
    },
    {
      "root": "user",
      "pages": [
        "pages/address-list/address-list",
        "pages/address/address",
        "pages/user-info/user-info",
        "pages/follow/follow"
      ]
    },
    {
      "root": "order",
      "pages": [
        "pages/detail/detail",
        "pages/index/index",
        "pages/logistics/logistics",
        "pages/sub/sub",
        "pages/gift/record"
      ]
    },
    {
      "root": "product",
      "pages": [
        "pages/detail/detail",
        "pages/receiving-gift/receiving-gift"
      ]
    },
    {
      "root": "discuss",
      "pages": [
        "pages/index/index",
        "pages/message/message",
        "pages/history/history"
      ]
    },
    {
      "root": "transaction",
      "pages": [
        "pages/order/order",
        "pages/paymentResult/paymentResult"
      ]
    },
    {
      "root": "merchant",
      "pages": [
        "pages/video/video",
        "pages/index/index"
      ]
    },
    {
      "root": "common",
      "pages": [
        "pages/classification/classification",
        "pages/location/location",
        "pages/search/search"
      ]
    },
    {
      "root": "notice",
      "pages": [
        "pages/detail/detail"
      ]
    }
  ],
    //底部TabBar页面，至少2个最多5个
  "tabBar": {
    "color": "#000",
    "selectedColor": "#fff",
    "backgroundColor": "#fff",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页"
      },
      {
        "pagePath": "pages/notice/notice",
        "text": "消息"
      },
      {
        "pagePath": "pages/preferential/preferential",
        "text": "优惠"
      },
      {
        "pagePath": "pages/cart/cart",
        "text": "购物车"
      },
      {
        "pagePath": "pages/my/my",
        "text": "我的"
      }
    ],
    "custom": true
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json",
  "lazyCodeLoading": "requiredComponents",
  "usingComponents": {},
  "requiredPrivateInfos": [
    "chooseLocation",
    "getLocation"
  ],
  "permission": {
    "scope.userLocation": {
      "desc": "你的位置信息将用于小程序位置接口的效果展示"
    },
    "scope.camera": {
      "desc": "将使用您的相机功能"
    },
    "scope.userLocationBackground": {
      "desc": "你的位置信息将用于小程序在后台通过接口获取位置信息"
    }
  }
}

打包原则：

1. 小程序会按subpackages的配置进行分包，subpackages之外的目录将被打包到主包中
2. 主包也可以有自己的pages（既最外层的pages字段）
3. tabBar页面必须在主包内
4. 分包之间不能互相嵌套

普通分包以及主包之间的引用原则：

主包里面的资源（js, template, wxss, components，图片）都是全局的，可以被公用；而每个分包相当于有自己的“作用域”，自己的资源，只能用自己的或者使用主包的，但是不能使用其他子包的资源

• 主包无法引用分包内的私有资源
• 分包之间不能相互引用私有资源
• 分包可以引用主包内的公共资源

3.独立分包

什么是独立分包

当小程序从普通的分包页面启动时，需要首先下载主包。独立分包本质上也是分包，只不过它比较特殊，可以独立于主包和其他分包而单独运行。独立分包不依赖主包既可运行，可以很大程度上提升分包页面的启动速度。

注意：一个小程序中可以有多个独立分包

image.png

image.png

独立分包和普通分包的区别：

• 最主要的区别：是否依赖于主包才能运行
• 普通分包必须依赖主包才能运行
• 独立分包可以在不下载主包的情况下，独立运行

独立分包的应用场景：

开发者可以按需，将某些具有一定功能独立性的页面配置到独立分包中，原因如下：当小程序从普通的分包页面启动时，需要首先下载主包，而独立分包不依赖主包既可运行，可以很大程度上提升分包页面的启动速度。

配置独立分包：

在app.json中分包的位置中，利用independent:true通过节点，声明当前分包为“独立分包”

image.png

独立分包引用原则：

1. 独立分包和普通分包以及主包之间，是相互隔绝的，不能相互引用彼此的资源
2. 主包无法引用独立分包内的私有资源
3. 独立分包之间，不能相互引用私有资源
4. 独立分包和普通分包之间，不能相互引用私有资源
5. 特别注意：独立分包中不能引用主包内的公共资源

4.分包预下载

什么是分包预下载

分包预下载指的是：在进入小程序的某个页面时，由框架自动预下载可能需要的分包，从而提升进入后续分包页面时的启动速度。

在进入某个页面的时候，预下载当前页面的分包资源

{
  "pages": [
    "pages/index/index",
    "pages/info/info",
    "pages/about/about",
    "pages/mine/mine"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle":"black"
  },
  "sitemapLocation": "sitemap.json",
  "usingComponents": {
    "van-button": "@vant/weapp/button/index"
  },
  "tabBar": {
    "selectedColor": "#576b95",
    "color": "#888888",
    "borderStyle": "white",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "static/tabImg/index.png",
        "selectedIconPath": "static/tabImg/indexSelect.png"
      },
      {
        "pagePath": "pages/info/info",
        "text": "信息",
        "iconPath": "static/tabImg/index.png",
        "selectedIconPath": "static/tabImg/indexSelect.png"
      },
      {
        "pagePath": "pages/about/about",
        "text": "关于",
        "iconPath": "static/tabImg/geren.png",
        "selectedIconPath": "static/tabImg/gerenSelect.png"
      },
      {
        "pagePath": "pages/mine/mine",
        "text": "我的",
        "iconPath": "static/tabImg/geren.png",
        "selectedIconPath": "static/tabImg/gerenSelect.png"
      } 
    ]
  },
  "subPackages": [
    {
      "root": "subpackage/",
      "pages": [
        "pages/testFun1/testFun1"
            ]
    },
    {
      "root": "subpackage2/",
      "name":"pack1", 
      "pages": [
        "pages/testFun2/testFun2"
      ],
      "independent": true
    }
  ],
  // 分包预下载
  "preloadRule": {
    "pages/info/info":{ // 进入的那个页面 info页面 下载 subpackage2包 网络状态 wifi 或者 all
      "packages": ["subpackage2"],
      "network":"wifi"
    }
  }
}

image.png