uniapp小程序分包

703 阅读2分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第1天

为什么要使用小程序的“分包加载”方案

前言:微信小程序限制了代码包不能超过 2MB,限制大小是对小程序启动速度的考虑,但是2MB 大小严重限制了小程序功能的扩展,业务需求可能需要更大的体积,综合考虑微信推出了“分包加载方案”

在构建小程序分包项目时,构建会输出一个或多个分包。分包小程序必定含有一个主包,和多个分包。

主包:即放置默认启动页面/TabBar页面,以及一些所有分包都需用到公共资源/JS 脚本;

分包:则是根据开发者的配置进行划分。

分包原理:在小程序启动时,默认会下载主包并启动主包内页面,当用户进入分包内某个页面时,客户端会把对应分包下载下来,下载完成后再进行展示。

微信小程序限制上传2MB,整体不能超过20MB,此时就需要分包来解决,当然,能压缩图片解决也可以(偷个懒)

话不多说开始

首先打开项目目录下的manifest.json,点击源代码视图

73F8B1A1-3061-48ff-B65F-00F4095C2843.png 在mp-weixin下写入"optimization": { "subPackages": true }

36418AF2-E900-48c5-A662-0B95FE3A9E70.png 这样就开启微信小程序分包,然后打开pages.json,在"pages"数组下新建subPackages,这个里面就是分包,root代表分包根目录,"pages"是分包子路径 如图:

A7350CD4-2E37-45a0-8588-E192DBCAFCDB.png, 分包里也可以更进一步放入子组件,css等

867AF83E-5C62-4891-9A3F-5D9D46E7D184.png 最后,如有需要可以配置预载,优化启动速度,官网地址uniapp.dcloud.io/api/preload… 最最后贴上自己常用的图片压缩网站贼好用tinypng.com/