详细讲解uniapp转小程序分包教程！！！

1.分包

小程序主包或分包不能超过2M，总包大小不能超过16M，分包还可以优化小程序的首次启动时间。

分包前后对比
分包前

分包后

小程序分包预加载

我们在第一次加载分包中页面时，通常会提示“正在加载模块”,影响用户体验！！！

uniapp分包配置

对manifest.json文件进行配置一下,参考官网，在manifest配置以下节点，可以在App端启动分包。

"app-plus": {
     
  "optimization": {
     
    "subPackages": true
  },
  "runmode" : "liberate" // 开启分包优化后，一定要配置一下资源释放模式
}

建立分包文件夹

在pages同级目录下创建文件夹为分包文件夹，如pagesA,这个文件夹就是分包的页面路径，以及这些页面所用到的组件资源都可以放在pagesA这个文件中。(建议静态资源放在网络上,减少包的内存占有)

├── components
├── App.vue
├── main.js
├── pagesA
│ └── my
├── pagesB
│ └── list
├── pages
│ ├── index
│ └── logs
└── static

分包配置

root为打包的根路径。其下pages为分包的页面配置(注意分包配置的path,在其他包中不能重复设置)

配置page.json文件，在和pages同级配置subpackages

"subPackages": [{
     
		"root": "pagesA",  //分包根路径
		      "name": "pack2", //分包名字可写可不写
		"pages": [{
     
				"path": "video/video", //分包根路径下的页面路径
				"style": {
      // 页面样式
					"navigationStyle": "custom"
				}
			},

		]
	}],
	//预加载配置,可以提高用户体验
	 "preloadRule": {
     
	 "pagesA/video/video": {
        //想要实现预加载的页面路径
      "network": "all", //指定网络 all 不限网络   wifi：仅wifi
      "packages": ["subpages"]  // 进入页面后预下载分包的 root 或 name。__APP_表示主包。
    }
 },

建议：

推荐一个包的页面在12个内，以防后期更改需求，需要增加页面等，导致超出小程序上传的每个包的最大容量，在定义在Taber的页面，必须放在主包下；

preloadRule属性

预载入属性，但通常情况下不建议使用。

效果

在你进入到某个页面时，如果是你设定了preloadRule的页面，他就会默认的加载你需要加载的那整个分包，即便时之前以及预载过了。大大浪费了许多加载资源，延迟了小程序的人机体验度

预加载成功使用 preloadSubpackages查看

进入触发预加载页面时查看log 会打印 preloadSubpackages 信息，显示 success即为成功
触发页面的选取也要注意，既要能满足用户的体验但也要注意预加载分包会对当前页面的加载速度有一定的影响

图片分包

图片放在根目录的static下面，打包的时候是直接打包到我们的主包下面，这样主包的负荷就会非常大，项目相对大一点的时候，图片也是非常占据资源的，所以这里也做一个分包处理。
一个图片文件夹，命名按需求，图片下面的分包图片必须和你分包的页面名称一致，方便改路径

静态文件分包

在HBuilderX中文件manifest.json中选择源码视图，找到mp-weixin添加以下代码：

“optimization”:{
     
"subPackages":true
}
//开启分包优化

然后在分包文件夹下新建文件夹static用于存放图片就可以了，在微信开发者工具中会把静态文件直接打包到分包内

打包

声明 subpackages 后，将按 subpackages 配置路径进行打包，subpackages 配置路径外的目录将被打包到
app（主包） 中，tabBar 页面必须在 app（主包）内
文件大的话，就只有把图片放线上，少用静态图片

分包加载如何进行低版本兼容

微信后台会编译两份代码包，用来处理旧版本客户端的兼容性，一份是分包后代码，一份是整包的兼容代码。
新客户端用分包，老客户端用的整包，完整包会把各个 subpackage 里面的路径放到 pages 中。

上面几种方式都可以使用，选最合适的即可，教程不详细之处，望大神指出！！！
本人求前端学习伙伴一名，有意可以私信！！！
代码图片