关于vue.js:小程序分包小程序包大于2M来这教你分包啊

前言

🍊原因

该大的不大，小程序包超出 2M，无奈上传公布

前段时间我的项目迭代时，因版本大降级，导致 uniapp 打包后小程序后，包体积大于 2M。尽管将图片等 动态资源压缩 ，体积大的 资源搁置 cdn，在不懈的致力下，治标不治本，包体积还是不听话的长到 2M 以上。憋的切实没方法，遂将小程序分包，彻底解除封印，特来跟大家分享下 如何将小程序分包，减小主包大小。

🎯次要指标

实现 2 大重点

1. 如何进行小程序分包

2. 如个依据分包调整配置文件

   ---

   🍈猜你想问

   如何与狗哥分割进行探讨

   关注公众号【JavaDog 程序狗】

   公众号回复【入群】或者【退出】，便可成为【程序员学习交换摸鱼群】的一员，问题轻易问，牛逼轻易吹。

此群劣势：

1. 技术交换随时沟通
2. 任何私活资源收费分享
3. 实时科技动态领先通晓
4. CSDN 资源收费下载

5. 自己所有源码均群内开源，可收费应用

   2. 踩踩狗哥博客

   javadog.net

   大家能够在外面留言，随便施展，有问必答

🍯猜你喜爱

文章举荐

【我的项目实战】SpringBoot+uniapp+uview2 打造 H5+ 小程序 +APP 入门学习的聊天小我的项目
【我的项目实战】SpringBoot+uniapp+uview2 打造一个企业黑红名单吐槽小程序
【模块分层】还不会 SpringBoot 我的项目模块分层？来这手把手教你！
【ChatGPT】手摸手，带你玩转 ChatGPT
【ChatGPT】SpringBoot+uniapp+uview2 对接 OpenAI，带你开发玩转 ChatGPT

注释

🍵三个问题

1. 为什么小程序会有 2M 的限度？

1. 用户体验：小程序要求在用户进入小程序前可能疾速加载，以提供良好的用户体验。限度小程序的体积能够确保小程序可能在较短的工夫内下载和启动，防止用户长时间的期待。
2. 网络条件：思考到不同地区和网络条件的差别，限度小程序的体积能够确保在低速网络环境下也可能较快地加载和关上小程序，提供更宽泛的用户笼罩。
3. 设施存储：一些用户应用的设施可能存储空间无限，限度小程序的体积能够确保小程序能够在这些设施上失常装置和运行。

2. 如何解决包过大问题？

1. 优化代码，删除掉不必的代码
2. 图片压缩或者上传服务器
3. 分包加载

3. 什么是分包加载？

小程序个别都是由某几个性能组成，通常这几个性能之间是独立的，但会依赖一些公共的逻辑，且这些性能个别会对应某几个独立的页面。那么小程序代码的打包，能够依照性能的划分，拆分成几个分包，当须要用到某个性能时，才加载这个性能对应的分包。

🧀实操分包步骤

1. 查看我的项目构造

通过上方三个问题，咱们开始具体分包流程，首先看一下 分包前我的项目构造 及pages.json 配置文件

pages.json
{
    "pages": [ //pages 数组中第一项示意利用启动页，参考：https://uniapp.dcloud.io/collocation/pages
        {
            "path": "pages/index/index",
            "style": {"navigationBarTitleText": "uni-app"}
        },
        {
            "path": "pages/card/index",
            "style": {"navigationBarTitleText": "uni-app"}
        },
        {
            "path": "pages/device/index",
            "style": {"navigationBarTitleText": "uni-app"}
        },
        {
            "path": "pages/order/index",
            "style": {"navigationBarTitleText": "uni-app"}
        },
        {
            "path": "pages/product/index",
            "style": {"navigationBarTitleText": "uni-app"}
        }
    ],
    "globalStyle": {
        "navigationBarTextStyle": "black",
        "navigationBarTitleText": "uni-app",
        "navigationBarBackgroundColor": "#F8F8F8",
        "backgroundColor": "#F8F8F8"
    },
    "uniIdRouter": {}}

2. 剖析主包大小

微信开发者工具中，查看【详情】进行剖析，此处本地代码只有一个主包大小 399.8KB

3. 参考文档

本文以uniapp 为实操介绍案例

小程序官网文档：

https://developers.weixin.qq.com/miniprogram/dev/framework/subpackages.html

uniapp 分包文档：

https://uniapp.dcloud.net.cn/collocation/pages.html#subpackages

4. 结构调整

将咱们我的项目构造依照如下图所示进行拆分

新建 subPages_A 和 subPages_B，将 pages 下不同页面移入进新增的两个包，此处 subPages_A 的名字只做示例，理论要依照规范命名！

比拟下之前我的项目构造，此处我的项目会报错，不必放心，稍后批改 pages.json

5. 批改 pages.json

依据上一步拆分的包门路，进行配置文件的调整，此处 留神 ”subPackages” 要和 “pages” 同级

{
    "pages": [ //pages 数组中第一项示意利用启动页，参考：https://uniapp.dcloud.io/collocation/pages
        {
            "path": "pages/index/index",
            "style": {"navigationBarTitleText": "uni-app"}
        }
    ],
    "subPackages": [{
        "root": "pages/subPages_A",
        "pages": [{
                "path": "card/index",
                "style": {"navigationBarTitleText": "card"}
            },
            {
                "path": "device/index",
                "style": {"navigationBarTitleText": "device"}
            }
        ]
    }, {
        "root": "pages/subPages_B",
        "pages": [{
                "path": "order/index",
                "style": {"navigationBarTitleText": "order"}
            },
            {
                "path": "product/index",
                "style": {"navigationBarTitleText": "product"}
            }
        ]
    }],
    "globalStyle": {
        "navigationBarTextStyle": "black",
        "navigationBarTitleText": "uni-app",
        "navigationBarBackgroundColor": "#F8F8F8",
        "backgroundColor": "#F8F8F8"
    },
    "uniIdRouter": {}}

这里的意思是将主包拆成 subPages_A 和 subPages_B 两个子包，比照下之前的配置

6. 启动测试

启动后查看微信开发者工具，查看【详情】可看到 主包大小降为 326.0kb，并且下方还有subPages_A 和 subPages_B 两个子包

比拟之前包大小，分包胜利！

7. 特地留神

🎯 如果设计代码中门路问题，须要调成最新包构造门路。例如

拆包前 跳转到对应设施页面

uni.navigateTo({url:'/pages/device/index'})

拆包后 跳转到对应设施页面

uni.navigateTo({url:'/pages/subPages_A/device/index'})

切记如果拆包后所有门路问题须要对立批改，否则则会报错！！！

总结

本文通过 理论 demo 进行 uniapp 小程序拆包 ，通过剖析 我的项目主包大小 ，查看 官网文档 ，依照 性能划分进行子包拆分，如果还有博友存在疑难或者不了解能够在上方与本狗分割，或者查看本狗公布在上方的代码，心愿能够帮到大家。