小程序包大小超过限制

一、开启分包

1.在pages.json文件中配置分包
"subPackages": [
		{
			"root": "pagesA",
			"pages": [
				{
					"path": "add/add",
					"style": {
						"navigationBarTitleText": "页面标题1",
						"enablePullDownRefresh": false
					}
				},
				{
					"path": "edit/edit",
					"style": {
						"navigationBarTitleText": "页面标题2",
						"enablePullDownRefresh": false
					}
				},
			]
		},
		{
			"root": "pagesB",
			"pages": [
				{
					"path": "select/select",
					"style": {
						"navigationBarTitleText": "页面标题1",
						"enablePullDownRefresh": false
					}
				},
				{
					"path": "del/del",
					"style": {
						"navigationBarTitleText": "页面标题2",
						"enablePullDownRefresh": false
					}
				},
			]
		}
]
2.在manifest.json文件中配置一下分包优化
/* 小程序特有相关 */
    "mp-weixin" : {
        "appid" : "xxxxxx",
        "setting" : {
            "urlCheck" : false,
            "postcss" : true,
            "minified" : true,
            "es6" : true
        },
        "permission" : {
            "scope.userLocation" : {
                "desc" : "你的位置信息将用于小程序定位"
            }
        },
        "usingComponents" : true,
        /* 分包优化vendor.js */
        "optimization" : {
            "subPackages" : true
        },
        "runmode" : "liberate" // 开启分包优化后,必须配置资源释放模式
    },

使用分包可以减轻主包的体积 (注意每个分包也是不能超过2MB的)

二、以压缩方式运行

1.在pages.json文件的顶部配置一条运行脚本(不清楚实际有没有生效)
"dev:mp-weixin": "cross-env NODE_ENV=development UNI_PLATFORM=mp-weixin vue-cli-service uni-build --watch --minimize",
2.找到package.json文件
"scripts": {
	"dev:mp-weixin": "cross-env NODE_ENV=development UNI_PLATFORM=mp-weixin vue-cli-service uni-build",
    "dev:mp-weixin-mini": "cross-env NODE_ENV=development UNI_PLATFORM=mp-weixin vue-cli-service uni-build --watch --minimize",
}

运行npm run dev:mp-weixin是没有压缩的
运行npm run dev:mp-weixin-mini是会自动压缩的
带mini的这条命令是自己加上去的,也可以加其他的(最主要的就是 --watch --minimize)进行了压缩

三、一些小建议

1.一些图片文档之类的静态资源尽量放在服务器上,通过请求来获取。
2.如果觉得把资源转移到服务器上麻烦,可以尝试用tiny来压缩png图片,对比原图看不出太大差别,图片的体积却减少很多,也能省出一些空间。
3.小程序调试工具的右上角点开详情,这些选项可以看着选,也是能节省出一些空间的。

四、最终的绝招

如果以上的招数都用了还是超体积,最后一招“打包”
1.建议先把dist目录删除再进行打包操作,避免资源堆积
运行npm run build:mp-weixin进行打包

打包后小程序开发工具重新导入文件夹,路径一般是 dist\build\mp-weixin
打开后发现体积又减小了

以上是我遇到过的问题,记录下来,仅供参考,欢迎大佬在评论区分享更多的方法。

  • 3
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值