微信小程序 31 分包机制

最新推荐文章于 2023-11-03 23:44:16 发布

牟泉禹[Dark Cat]

最新推荐文章于 2023-11-03 23:44:16 发布

阅读量826

点赞数

分类专栏：学习笔记文章标签：微信小程序小程序前端

BY-牟泉禹/MuQuanyu

本文链接：https://blog.csdn.net/qq_52606908/article/details/125986659

版权

学习笔记专栏收录该内容

387 篇文章 9 订阅

订阅专栏

31.1 常规分包

如果说我们写的小程序整体大于了 2M 怎么办呢？可以说这个情况在如今小程序日益壮大、火热下，是很容易出现的。一个好的小程序必定会很大。功能多，界面多，无论你怎么做优化和压缩其实都会超过 2M。

答：分包机制。小程序官方提供了这样的一个机制。可以把整个小程序进行分包。单个分包/主包不能超过 2MB 大小！所有分包加在一起的大小不超过 16MB。

在这里插入图片描述

注意

加载小程序的时候还是先加载主包，当需要访问分包的页面时，才会加载分包的内容。
分包的页面可以访问主包的文件、数据、图片等资源
除了分包以外的内容都会被打包到主包中去。主包通常会打包一些 tarBar 页面。
除了 tarBar 页面，在开始时不需要加载的页面其实都应该想办法将其分包。

直接新建分包目录，然后把对应的页面放到目录下。

在这里插入图片描述

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

去更改相关的代码

在这里插入图片描述

31.2 独立分包

什么是独立分包呢？

答：独立分包最主要的特点在于可单独访问分包的内容，不需要下载主包。独立分包是不依赖于主包和其他包独立存在的内容！（也就是说当我独立分包的页面加载的时候，就绝对不会加载其它的页面。即使我用到了其他页面的东西，我也不加载！）

使用场景：通常某些页面和当前小程序的其他页面关联性不大的时候，就可以进行独立分包了。比如说临时添加的 广告页 或者 活动页。

举例

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

首先直接在 app.json 里面对其中一个分包配置那里，添加一个属性 "independent": true 这个分包就会变成独立分包了。对的，就这么简单！！！

在这里插入图片描述
我们细心的发现确实所有的 iconfont 都消失了！

在这里插入图片描述

这个时候怎么办呢？答：因为独立分包了，所以是一个独立的个体，那么自己的 iconfont 就自己导入呗。能咋办？

在这里插入图片描述

你看，这样不就恢复了嘛。

31.3 分包预下载

分包预下载是必须要开发的一个功能！这个是无可厚非的。基本上大多数产品的初衷都是考虑到广大用户的体验的。而用户打开小程序某个页面的加载速度，想要得到质的提高。就必须得预下载！而不是说做什么优化。预下载是最简单粗暴的提高方式！

当你预下载完资源后，打开页面的速度肯定是质的飞跃和提高！

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

app.json 当中直接配置

{
    "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 加载完成后 需要 预下载哪个包*/
        "pages/index/index": {
        	"network": "all", /*预下载 网络模式 all 就是数据和wifi都可以，wifi 就是光 wifi 模式 下载*/
            "packages": ["songPackage","other"]
        }
    }
}