uni-app分包，微信小程序分包处理，微信小程序优化主包尺寸

什么是分包

分包指的是把一个完整的小程序项目，按照需求划分为不同的子包，在构建时打包成不同的分包，用户在进入分包内某个页面时，客户端会把对应分包下载下来，下载完成后再进行展示。

为什么要分包

小程序中引入了一个插件，光min.js都超500kb了，代码已经无法在压缩了，然而微信小程序限制了主包尺寸 (不包合插件) 应小于 1.5 M，限制大小是对小程序启动速度的考虑，但是限制大小的同时也严重限制了小程序功能的扩展，小程序业务需求可能需要更大的体积，综合考虑微信推出了 分包加载方案

分包操作步骤

1. 开启分包

   • 找到 manifest.json
   • 点击源码视图
   • 找到 mp-weixin
   • 添加配置项 ** “optimization” : {“subPackages” : true}**

      "optimization" : {
      	"subPackages" : true
      },
     

     

2. 配置分包

   • 新建 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"] // 进入页面后预下载分包
     		}
     	}
     }],
     

3. 调整插件位置

   • sbPages 目录下新增 components 文件夹
   • 将 uni_modules 目录下的 lime-echart 组件，移动到 sbPages/components 下
   • 删除 uni_modules 目录下的 lime-echart 组件
     

4. 修改组件引入的地址

   • 原地址

     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';
     

     

5. 打包发行
   
   

   完成…关机下班…