uni-app微信小程序分包处理

场景

由于微信小程序规定不能超过2M，在做了精简优化代码之后还是太大了，无法上传代码怎么办？使用官方支持的分包来解决。

官方文档：https://uniapp.dcloud.io/collocation/pages?id=subpackages

1. subPackages 里的pages的路径是 root 下的相对路径，不是全路径。
2. 微信小程序每个分包的大小是2M，总体积一共不能超过16M。
3. 百度小程序每个分包的大小是2M，总体积一共不能超过8M。
4. 支付宝小程序每个分包的大小是2M，总体积一共不能超过4M。
5. QQ小程序每个分包的大小是2M，总体积一共不能超过24M。
6. 分包下支持独立的 static 目录，用来对静态资源进行分包。
7. uni-app内支持对微信小程序、QQ小程序、百度小程序分包优化，即将静态资源或者js文件放入分包内不占用主包大小。详情请参考：关于分包优化的说明
8. 针对vendor.js过大的情况可以使用运行时压缩代码
   • HBuilderX创建的项目勾选运行-->运行到小程序模拟器-->运行时是否压缩代码
   • cli创建的项目可以在pacakge.json中添加参数--minimize，示例："dev:mp-weixin": "cross-env NODE_ENV=development UNI_PLATFORM=mp-weixin vue-cli-service uni-build --watch --minimize"

方法

1.在项目目录中的pages同级，创建分包

┌─pages               
│  ├─index
│  │  └─index.vue    
│  └─login
│     └─login.vue    
├─subpages   
│  ├─static
│  └─list
│     └─list.vue 
├─static             
├─main.js       
├─App.vue          
├─manifest.json  
└─pages.json   

2.在pages.json中配置页面

{
    "pages": [{
        "path": "pages/index/index",
        "style": { ...}
    }, {
        "path": "pages/login/login",
        "style": { ...}
    }],
    //把主包中的页面剪切到分包中，注意不要在主包和分包中同时配置
    "subPackages": [{
        "root": "subpages",
        "pages": [{
            "path": "list/list", //注意path书写
            "style": { ...}
        }]
    }, {
        "root": "subpages",
        "pages": [{
            "path": "detail/detail",
            "style": { ...}
        }]
    }],
}

3.在manifest.json中开启分包优化

点击“源码视图”，在小程序特有相关中配置"optimization":{"subPackages":true}

• 在对应平台的配置下添加"optimization":{"subPackages":true}开启分包优化
• 目前只支持mp-weixin、mp-qq、mp-baidu的分包优化
• 分包优化具体逻辑：
  • 静态文件：分包下支持 static 等静态资源拷贝，即分包目录内放置的静态资源不会被打包到主包中，也不可在主包中使用
  • js文件：当某个 js 仅被一个分包引用时，该 js 会被打包到该分包内，否则仍打到主包（即被主包引用，或被超过 1 个分包引用）
  • 自定义组件：若某个自定义组件仅被一个分包引用时，且未放入到分包内，编译时会输出提示信息

{
    ...

    /* 小程序特有相关 */
    "mp-weixin" : {
        "appid" : "wx7089f42d9114e06d",
        "setting" : {
            "urlCheck" : false,
            "es6" : true,
            "postcss" : false,
            "minified" : true
        },
        "usingComponents" : true,
		// 开启分包优化
		"optimization":{
			"subPackages":true
		}
    },

    ...
}

4.路由跳转

uni.navigateTo({
    url: '/subpages/list/list'
})

5.重启微信开发者工具

可以看到主包和分包的大小，主包小于2M，可以上传了