一、分包介绍
-
subPackages
里的pages的路径是root
下的相对路径,不是全路径。 - 微信小程序每个分包的大小是2M,总体积一共不能超过20M。所以需要分包管理你的文件 。
- 主包:放置默认启动页面/TabBar 页面,以及一些所有分包都需用到公共资源/JS 脚本;
- 分包:是根据pages.json的配置进行划分。
- 在小程序启动时,默认会下载主包并启动主包内页面,当用户进入分包内某个页面时,会把对应分包自动下载下来,下载完成后再进行展示。
- 分包下支持独立的
static
目录,用来对静态资源进行分包。 - 针对
vendor.js
过大的情况可以使用运行时压缩代码-
HBuilderX
创建的项目勾选运行-->运行到小程序模拟器-->运行时是否压缩代码
-
cli
创建的项目可以在package.json
中添加参数--minimize
,示例:"dev:mp-weixin": "cross-env NODE_ENV=development UNI_PLATFORM=mp-weixin vue-cli-service uni-build --watch --minimize"
-
二、使用方法:
假设支持分包的 uni-app
目录结构如下:
┌─pages
│ ├─index
│ │ └─index.vue
│ └─login
│ └─login.vue
├─pagesA
│ ├─static
│ └─list
│ └─list.vue
├─pagesB
│ ├─static
│ └─detail
│ └─detail.vue
├─static
├─main.js
├─App.vue
├─manifest.json
└─pages.json
则需要在 pages.json 中填写
{ "pages": [{ "path": "pages/index/index", "style": { ...} }, { "path": "pages/login/login", "style": { ...} }], "subPackages": [{ "root": "pagesA", "pages": [{ "path": "list/list", "style": { ...} }] }, { "root": "pagesB", "pages": [{ "path": "detail/detail", "style": { ...} }] }], "preloadRule": { "pagesA/list/list": { "network": "all", "packages": ["__APP__"] }, "pagesB/detail/detail": { "network": "all", "packages": ["pagesA"] } } }