原生小程序之 分包加载 subpackage （分多个包，查看包体积）_原生小程序分包

原生小程序之 分包加载 subpackage

分包步骤

• 01：再项目根目录创建，subpackage 文件夹
• 02：再app.json文件之中进行配置代码分包处理
• 03：root 设置 归属的包在哪里
• 04：pages/testFun1/testFun1 具体存放路径
• 05：输入路径后，会自动产生对应的 包 页面

  "subPackages": [
    {
      "root": "subpackage/",
      "pages": [
        "pages/testFun1/testFun1",
        "pages/testFun2/testFun2",
        "pages/testFun3/testFun3"
			]
    }
  ]
1
2
3
4
5
6
7
8
9
10

• 效果
  

简单的测试，使用

• info.wxml

  <van-cell-group>
    <van-cell wx:for="{{JumpObj}}" wx:key="{{index}}" title="{{item.title}}"  catchtap="{{item.func}}" is-link />
  </van-cell-group>
1
2
3

• info.js

// pages/info/info.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    // 跳转 页面的数据
    JumpObj:[
      {
        title:"测试1",
        func:"testFun1"
      },
      {
        title:"测试2",
        func:"testFun2"
      },      
      {
        title:"测试3",
        func:"testFun3"
      },
    ]
  },
  // 跳转 测试相关
  testFun1(){
    console.log("testFun1");
    wx.navigateTo({
      url: '../../subpackage/pages/testFun1/testFun1',
    })
  },
  testFun2(){
    wx.navigateTo({
      url: '../../subpackage/pages/testFun2/testFun2',
    })
  },
  testFun3(){
    wx.navigateTo({
      url: '../../subpackage/pages/testFun3/testFun3',
    })
  },
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

• 效果
  
• 点击 测试1 跳转到 测试1页面
  

原生小程序之 分包加载 subpackage （分多个包）

• name 为这个包起一个名字

  "subPackages": [
    {
      "root": "subpackage/",
      "pages": [
        "pages/testFun1/testFun1"
			]
    },
    {
      "root": "subpackage2/",
      "name":"pack1", 
      "pages": [
        "pages/testFun2/testFun2"
      ]
    }
  ]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

原生小程序之 分包加载 subpackage （分多个包，查看包体积）

独立分包

  "subPackages": [
    {
      "root": "subpackage/",
      "pages": [
        "pages/testFun1/testFun1"
			]
    },
    {
      "root": "subpackage2/",
      "name":"pack1", 
      "pages": [
        "pages/testFun2/testFun2"
      ],
      "independent": true
    }
  ]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

分包预下载

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

{
  "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"
    }
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73