uniapp-微信小程序如何分包-以及-静态文件占用空间过多的解决方式

本文主要解决：

1.用uniapp制作微信小程序如何分包，

2.如何解决静态文件占用空间过多的情况~

按照惯例，文章结尾有总结，急用可以直接看。

在第一次用uniapp做微信小程序时，出现一个问题

说主包应小于1.5MB，可以考虑分包优化

那么就了解一下分包的实现方式吧

默认情况下，分包是关闭的，

于是需要先开启分包

在manifest.json中扎到"mp-weixin"在轻重配置上

"optimization":{"subPackage":true}        //开启分包

然后创建与pages同级的目录，即分包，可以创建多个

但注意，所有包，总空间占用不得超过20MB

分包中放入不在tabBar上页面文件

然后再pages.json中与"tabBar"等属性同级的位置上，

写如：

"subPackages":[

        {}，//分包1的配置

        {}，//分包2的配置

        {}   //分包3的配置

        ...

]

分包的配置样例：

"subPackages":[ 
{
    "root":"PagesA" //与pages同级，所以直接写PagesA,PagesA是自己给分包取的名称
    "pages":[
        {
            本包中页面1配置
        },
        {
            本包中页面2配置
        },
    ]
},
{
    另一个分包的配置
},
    {...}
]

其中

root配置的是分包的根目录

pages进行的是分包中页面段配置，可以直接从原来自动生成的那儿剪切过来，但是要注意去掉路径中的pages/,因为页面已经在分包中而不在pages文件夹(包)中了。如果想自己写，分包中"pages"属性写法与原来在pages中时写法一样。

总结就是，先在manifest.json文件夹中的mp-weixin中配置"optimization"：{"subPackage":true}

然后创建与pages文件夹同级的文件夹，即分包

可以将tabBar用到的页面之外的页面放到分包中。

然后配置pages.json

在"tabBar"同级写上"subPackage":[

]

里面用{}装各个分包的配置

主要配置属性有俩

"root":配置分包根路径//由于是与pages包同级，直接写分包名即可

"pages":{

        {
            "path": "pages/index/index",
            "style": {
                "navigationBarTitleText": "首页"
            }
        },//这些如果之前创建页面是自动生成了，直接剪切过来就行。也可以按照文档进行相应配置~

}

为避免混淆，提示一下这里的"pages"属性不是pages文件夹(包)

配置"pages"属性：在全局文件中找pages.json页面路由，然后看我用蓝框框起的页面两个属性相关的内容即可。不想找，就看下面这张图片，可以解决基本问题

然后在分包后，注意，一些涉及到跳转至被分包页面的navigator标签或方法中的路径要记得更换成新的路径，比如原来是pages/index/index现在在分包PagesA中，就写PagesA/index/index

（当然这只是做演示，index页面作为首页正常是不会放到分包中的，因为几乎一开始就要用到，且首页肯定得放在tabBar中，一般放到主包中）

此外，发现分包并不能解决静态文件(尤其是图片)占空间巨大的问题，

于是可以申请(购买)一个oss对象存储，在阿里云目前(2024.3.26)似乎有免费的3个月使用申请(阿里云，给你做广告了哈~)，申请到后将图片上传到其中就会自动生成相应http路径，这样直接把之前在static包中的静态文件的(一般指图片)路径换成图片上传到oss后生成的http路径即可。在把哪些占空间的静态文件上传并替换路径后，就可以把他们从我们的静态文件夹(这里值uniapp项目中的static文件夹)删除了。