uni-app的pages.json之subPackages、preloadRule——分包

秉烛山人 發表於 2021-9-15 20:36:00

uni-app的pages.json之subPackages、preloadRule——分包

paages.json 用于uni-app的全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等。类似于微信小程序的<code>app.json页面管理部分。由于各个小程序平台的限制和优化启动速度。所以，我们可能需要用到分包机制——例如，在微信小程序中生成的单个包大于2M时，是不能上传的。</code> 
所以，我们使用subPackges和preLoadRule进行分包。
<h1>subPackages</h1>
<h2> 定义</h2>
<ul>
<li><code>分包加载配置，此配置为小程序的分包加载机制。</code></li>
<li>因小程序有体积和资源加载限制，各家小程序平台提供了分包方式，优化小程序的下载和启动速度。</li>
<li>分包相对于主包。主包，即放置默认启动页面/TabBar 页面，以及一些所有分包都需用到公共资源/JS 脚本；而分包则是根据pages.json的配置进行划分。</li>
<li>在小程序启动时，默认会下载主包并启动主包内页面，当用户进入分包内某个页面时，会把对应分包自动下载下来，下载完成后再进行展示。此时终端界面会有等待提示。</li>
<li>App默认为整包。从uni-app 2.7.12+ 开始，也兼容了小程序的分包配置。其目的不用于下载提速，而用于首页是vue时的启动提速。App下开启分包，除在pages.json中配置分包规则外，还需要在manifest中设置在app端开启分包设置，详见：https://uniapp.dcloud.io/collocation/manifest?id=app-vue-optimization</li>

</ul>
<h2>参数说明</h2>
subPackages 节点接收一个数组，数组每一项都是应用的子包，其属性值如下：
<table border="0">
<tbody>
<tr style="background-color: rgba(51, 51, 51, 1)">
<td>属性</td>
<td>类型</td>
<td>是否必填</td>
<td>描述</td>

</tr>
<tr>
<td>root</td>
<td>String</td>
<td>是</td>
<td>子包的根目录</td>

</tr>
<tr>
<td>Pages</td>
<td>Array</td>
<td>是</td>
<td>子包有哪些页面组成。参数详见下表。</td>

</tr>

</tbody>

</table>
<h3>pages参数说明</h3>
pages节点配置应用由哪些页面组成，pages节点接收一个数组，数组每项都是一个对象，其属性如下：
<table border="0">
<tbody>
<tr style="background-color: rgba(51, 51, 51, 1)">
<td>属性</td>
<td>类型</td>
<td>默认值</td>
<td>描述</td>

</tr>
<tr>
<td>path</td>
<td>String</td>
<td> </td>
<td>配置页面路径</td>

</tr>
<tr>
<td>style</td>
<td>Object</td>
<td> </td>
<td>配置页面窗口的表现，这里与主题无关，不赘述了。</td>

</tr>

</tbody>

</table>
<h2>注意事项</h2>
<ul>
<li>subPackages 的pages路径时相对于 root 下的路径，不是全路径。</li>
<li>微信小程序每个分包的大小是2M，总体积一共不能超过20M。</li>
<li>百度小程序的每个分包的大小时2M,总体积一共不超过8M。</li>
<li>支付宝小程序每个分包的大小是2M，总体积一共不超过8M。</li>
<li>QQ小程序每个分包的大小是2M，总体积一共不超过24M。</li>
<li>字节小程序每个分包的大小是2M，总体积一共不能超过16M（字节小程序基础库 1.88.0 及以上版本开始支持，字节小程序开发者工具请使用大于等于 2.0.6 且小于 3.0.0 的版本）。</li>
<li>分包下支持独立的 static 目录，用来对静态资源进行分包。</li>
<li>uni-app 内支持微信小程序、QQ小程序、百度小程序、支付宝小程序、<code>字节小程序(HBuilderX 3.0.3+)</code>分包优化，即将静态资源或者js文件放入分包内不占用主包大小。详情请参考：关于分包优化的说明</li>
<li>针对vendor.js 过大的情况，可以使用运行时压缩代码。
<ul>
<li><code>HBuilderX</code>创建的项目勾选<code>运行-->运行到小程序模拟器-->运行时是否压缩代码</code></li>
<li><code>cli</code>创建的项目可以在<code>package.json</code>中添加参数<code>--minimize</code>，示例：<code>"dev:mp-weixin": "cross-env NODE_ENV=development UNI_PLATFORM=mp-weixin vue-cli-service uni-build --watch --minimize"</code></li>

</ul>

</li>

</ul>
<h2>使用方法</h2>
假设分包支持的uni-app目录结构如下:
<div class="cnblogs_code">
<pre>─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 </pre>
</div>
则需要在pages.json 中填写。
<div class="cnblogs_code">
<pre>{
"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"]
 }
}
}</pre>
</div>
这里 preloadRule 表示分包预配置。提升后续分包页面时的启动速度。
<h1 id="preloadrule">preloadRule</h1>
<h2>定义</h2>
preloadRule表示分包预配置。
配置preloadRule后，在进入小程序某个页面时，由框架自动预下载可能需要的分包，提升进入后续分包页面时的启动速度。
<h2>语法</h2>
<div class="cnblogs_code">
<pre> "preloadRule":{key : value } </pre>
</div>
<h2>参数说明</h2>
 key 表示页面路径， value 是进入页面的预下载配置。每个配置项包含的参数如下： 
<table border="0">
<tbody>
<tr style="background-color: rgba(51, 51, 51, 1)">
<td>字段</td>
<td>类型</td>
<td>必填</td>
<td>默认值</td>
<td>说明</td>

</tr>
<tr>
<td>packages</td>
<td>StringArray</td>
<td>是</td>
<td>无</td>
<td>进入页面后预下载分包的 <code>root</code> 或 <code>name</code>。<code>__APP__</code> 表示主包。</td>

</tr>
<tr>
<td>network</td>
<td>String</td>
<td>否</td>
<td>wifi</td>
<td>在指定网络下预下载，可选值为：all（不限网络）、wifi（仅wifi下预下载）</td>

</tr>

</tbody>

</table>
app的分包，同样支持preloadRule，但网络规则无效。
<h1>参考网址</h1>
<ul>
<li>pages.json : https://uniapp.dcloud.io/collocation/pages?id=preloadrule</li>

</ul>

</div>
<div id="MySignature" role="contentinfo">
有志者，事竟成，破釜沉舟，百二秦关终属楚；苦心人，天不负，卧薪尝胆，三千越甲可吞吴。 
来源：https://www.cnblogs.com/luyj00436/p/15284591.html

頁: [1]

琼殿技术论坛's Archiver

uni-app的pages.json之subPackages、preloadRule——分包