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