什么是分包
分包指的是把一个完整的小程序项目,按照需求划分为不同的子包,在构建时打包成不同的分包,用户在进入分包内某个页面时,客户端会把对应分包下载下来,下载完成后再进行展示。
为什么要分包
小程序中引入了一个插件,光min.js都超500kb了,代码已经无法在压缩了,然而微信小程序限制了主包尺寸 (不包合插件) 应小于 1.5 M,限制大小是对小程序启动速度的考虑,但是限制大小的同时也严重限制了小程序功能的扩展,小程序业务需求可能需要更大的体积,综合考虑微信推出了 分包加载方案
分包操作步骤
-
开启分包
- 找到 manifest.json
- 点击源码视图
- 找到 mp-weixin
- 添加配置项 ** “optimization” : {“subPackages” : true}**
"optimization" : { "subPackages" : true },
-
配置分包
-
新建 sbPages文件夹 (位置、名字随便 – 我反正与 pages 同级)
-
配置pages.json文件
-
“pages” 同级配置,添加 **“subPackages”**配置项
"subPackages": [{ "root": "sbPages/pages/", // 子包的根目录 "pages": [],// 子包页面路由,跟主包路由写法一致 }],
注意!! 子包根目录不能直接是与pages同级的sbPages目录,否则组件引用会报错
-
添加分包预加载配置
"subPackages": [{ "root": "sbPages/pages/", // 子包的根目录 "pages": [{ "path": "alarmDetil/index", "style": { "navigationStyle": "custom" } } ],// 子包页面路由,跟主包路由写法一致 // 分包预加载配置 "preloadRule": { // 当我们进入了pages/login页面以后就会预下载sbPages分包 "pages/login": { "network": "all", // 在指定网络下开启预下载,all(不限网络)、wifi(仅wifi下预下载) "packages": ["sbPages"] // 进入页面后预下载分包 } } }],
-
-
调整插件位置
- sbPages 目录下新增 components 文件夹
- 将 uni_modules 目录下的 lime-echart 组件,移动到 sbPages/components 下
- 删除 uni_modules 目录下的 lime-echart 组件
-
修改组件引入的地址
- 原地址
import * as echarts from '@/uni_modules/lime-echart/static/ecStat.min.js'; import LEchart from '@/uni_modules/lime-echart/components/l-echart/l-echart.vue';
- 新地址
import * as echarts from '@/sbPages/components/lime-echart/static/echarts.min'; import LEchart from '@/sbPages/components/lime-echart/components/l-echart/l-echart.vue';
- 原地址
-
打包发行
完成…关机下班…