WeChat Mini Program 31 Subcontracting Mechanism

31.1 常规分包

---

如果说 Small program we wrote 整体 大于了 2M 怎么办呢？It can be said that this is the case Small programs today 日益壮大 、火热 下,是很容易出现的.A good little program It must be huge.功能多,Lots of interfaces,无论你怎么 做优化 和压缩 其实 都会 超过 2M.

答：分包机制.小程序官方 提供了这样的 一个机制.You can put the whole applet 进行 分包.单个 分包/主包 不能超过 2MB 大小！所有分包 size added together 不超过 16MB.

注意

• when loading the applet 还是 Load the main package first,When you need to access a subcontracted page,The content of the subpackage will be loaded.
• 分包的页面可以访问主包的文件、数据、图片 等资源
• All content except subpackages will be packaged into the main package.The main package usually packs some tarBar 页面.
• 除了 tarBar 页面,在开始时 不需要加载的 页面 Actually it should 想办法 subcontract it.

1. 直接新建 分包目录,然后 把 对应的 页面 放到 目录下.

2. app.js 配置分包

{
    
    "pages": [
        "pages/index/index",
        "pages/login/login",
        "pages/personal/personal",
        "pages/video/video",
        "pages/search/search"
    ],
    "style": "v2",
    "sitemapLocation": "sitemap.json",
    "window": {
    
        "navigationBarBackgroundColor": "#d43c33",
        "navigationBarTextStyle": "white",
        "navigationBarTitleText": "云音乐"
    },
    "tabBar": {
    
        "color": "#333",
        "selectedColor": "#d43c33",
        "list": [
            {
    
                "pagePath": "pages/index/index",
                "text": "主页",
                "iconPath": "/static/images/tabs/tab-home.png",
                "selectedIconPath": "/static/images/tabs/tab-home-current.png"
            },
            {
    
                "pagePath": "pages/video/video",
                "text": "视频",
                "iconPath": "/static/images/tabs/select.png",
                "selectedIconPath": "/static/images/tabs/selected.png"
            },
            {
    
                "pagePath": "pages/personal/personal",
                "text": "个人中心",
                "iconPath": "/static/images/tabs/tab-my.png",
                "selectedIconPath": "/static/images/tabs/tab-my-current.png"
            }
        ]
    },
    "requiredBackgroundModes": [
        "audio"
    ],
    "subpackages": [
        {
    
            "root": "songPackage",
            "pages": [
                "pages/recommendSong/recommendSong",
                "pages/songDetail/songDetail"
            ]
        },
        {
    
            "root": "otherPackage",
            "pages": [
                "pages/other/other"
            ]
        }
    ]
}

3. to change the relevant code

---

31.2 独立分包

什么是 Independent subcontracting ？

答：The main feature of independent subcontracting is that Subcontracted content can be accessed individually,不需要下载主包.Independent subpackages are content that does not depend on the main package and other packages to exist independently！（That is when my independently subcontracted page loads,No other pages will ever be loaded.Even if I use stuff from other pages,I don't load either！）

使用场景：Usually some pages and other pages of the current appletNot very relevant时候,就可以 进行 Independently subcontracted.比如说 临时添加的 广告页 或者 活动页.

• 举例

你比如说,我们 所有的 iconfont 其实都是 依赖于 主包 的 app.wxss 的.
那么 我们 如果 把 一个 分包 设为 Independent subcontracting.是不是 iconfont 就不会被 加载.这是肯定的！

首先 直接 在 app.json 里面 对 其中一个 The subcontract configuration is there,添加一个 属性 "independent": true这个 分包 就会变成 Independently subcontracted.对的,就这么简单！！！

We carefully discovered 确实 所有的 iconfont 都消失了！

这个时候怎么办呢？答：因为 Independently subcontracted,所以 是一个 独立的 个体,那么 自己的 iconfont 就自己 导入呗.能咋办？

你看,这样不就 It's recovered.

---

31.3 分包预下载

分包预下载 is a feature that must be developed！这个是 无可厚非的.Basically the original intention of most products are all considered experience of the majority of users.而用户 The loading speed of a page when the applet is opened,想要得到 quality improvement.就必须 得 预下载！而不是 说 做什么 优化.预下载 是 最简单 粗暴 的 way to improve！

when you pre-download it 资源后,The speed at which pages are opened 肯定是 qualitative leap and improvement！

其实 使用起来 也很简单啊,都是 配置级别的 使用方式.

• app.json directly configured

{
    
    "pages": [
        "pages/index/index",
        "pages/login/login",
        "pages/personal/personal",
        "pages/video/video",
        "pages/search/search"
    ],
    "style": "v2",
    "sitemapLocation": "sitemap.json",
    "window": {
    
        "navigationBarBackgroundColor": "#d43c33",
        "navigationBarTextStyle": "white",
        "navigationBarTitleText": "云音乐"
    },
    "tabBar": {
    
        "color": "#333",
        "selectedColor": "#d43c33",
        "list": [
            {
    
                "pagePath": "pages/index/index",
                "text": "主页",
                "iconPath": "/static/images/tabs/tab-home.png",
                "selectedIconPath": "/static/images/tabs/tab-home-current.png"
            },
            {
    
                "pagePath": "pages/video/video",
                "text": "视频",
                "iconPath": "/static/images/tabs/select.png",
                "selectedIconPath": "/static/images/tabs/selected.png"
            },
            {
    
                "pagePath": "pages/personal/personal",
                "text": "个人中心",
                "iconPath": "/static/images/tabs/tab-my.png",
                "selectedIconPath": "/static/images/tabs/tab-my-current.png"
            }
        ]
    },
    "requiredBackgroundModes": [
        "audio"
    ],
    "subpackages": [
        {
    
            "root": "songPackage",
            "pages": [
                "pages/recommendSong/recommendSong",
                "pages/songDetail/songDetail"
            ],
            "independent": true
        },
        {
    
            "root": "otherPackage",
            "name": "other"
            "pages": [
                "pages/other/other"
            ]
        }
    ],
    "preloadRule": {
    
        /*index 加载完成后 需要 Which package to pre-download*/
        "pages/index/index": {
    
        	"network": "all", /*预下载 网络模式 all 就是数据和wifi都可以,wifi 就是光 wifi 模式 下载*/
            "packages": ["songPackage","other"]
        }
    }
}

"name": "other" 这个属性 是 别名机制,就是 可以 给我们的 一个 分包 弄一个 别名.当然 预下载 可以 识别 这个 别名.

注意：app.json 中 不能 随便写 注释,其实 很多 关键的 配置文件 都是如此的.否则会报错！

• 什么时候 我们会 预加载 主包

这个 属实 是 不知道 什么时候 加载.你说 Independently subcontract to go Load the main package ~ 实际上 加载了 也没啥用.还是独立的.那么 到底什么时候 加载 The main package.The majority of netizens know,请在评论区 告知.