前端攻略node.js 移动前端开发平台 react小程序学习

小程序分包加载

2018-11-11  本文已影响8人  880d91446f17

开发者需要将小程序划分成不同的子包,在构建时打包成不同的分包,用户在使用时按需进行加载。

在构建小程序分包项目时,构建会输出一个或多个分包。每个使用分包小程序必须包含

一个主包,所谓的主包,即放置默认启动页/TabBar 页面,以及一些所有分包需要用到

整个小程序所有分包大小不超过 8M单个分包/主包大小不能超2M

对小程序进行分包,可以优化小程序首次启动的下载时间,以及在多团队共同开发时可以更高的解耦协作。

配置方法:

假设支持分包的小程序目录结构

├── app.js
├── app.json
├── app.wxss
├── packageA
│  └── pages
│  ├── cat
│  └── dog
├── packageB
│  └── pages
│  ├── apple
│  └── banana
├── pages
│  ├── index
│  └── logs
└── utils

开发者通过在 app.json subPackages 字段声明项目分包结构:


{
 "pages":[
 "pages/index",
 "pages/logs"
 ],
 "subpackages": [
 {
 "root": "packageA",
 "pages": [
 "pages/cat",
 "pages/dog"
 ]
 }, {
 "root": "packageB",
 "name": "pack2",
 "pages": [
 "pages/apple",
 "pages/banana"
 ]
 }
 ]
}

subPackages 中,每个分包的配置有以下几项:

字段 类型 说明
root String 分包根目录
name String 分包别名,分包预下载时可以使用
pages StringArray 分包页面路径,相对与分包根目录
independent Boolean 分包是否是独立分包

打包原则

1.声明 subPackages 后,将按 subPackages 配置路径进行打包,subPackages 配置路径外的目

2.录将被打包到 app(主包) 中

3.app(主包)也可以有自己的 pages(即最外层的 pages 字段)

4.subPackage 的根目录不能是另外一个 subPackage 内的子目录

5.tabBar 页面必须在 app(主包)内

引用原则

配置方法:

假设小程序的目录如下;

  ├── app.js
  ├── app.json
  ├── app.wxss
  ├── moduleA
  │  └── pages
  │  ├── rabbit
  │  └── squirrel
  ├── moduleB
  │  └── pages
  │  ├── pear
  │  └── pineapple
  ├── pages
  │  ├── index
  │  └── logs
  └── utils

开发者可以通过在 app.json 的 subpackages 字段中的分包配置中自定义 independent

字段声明对应分包为独立分包

{
     "pages": [
       "pages/index",
      "pages/logs"
      ],
     "subpackages": [
      {
      "root": "moduleA",
       "pages": [
      "pages/rabbit",
       "pages/squirrel"
      ]
      }, {
      "root": "moduleA",
      "pages": [
      "pages/pear",
      "pages/pineapple"
      ],
    "independent": true
    }//欢迎加入全栈开发交流圈一起学习交流:582735936
    ]//面向1-3年前端人员
  } //帮助突破技术瓶颈,提升思维能力

限制:

独立分包属于分包的一种,普通分包的所有限制独立分包有效。独立分包中插件

自定义组件的处理方式同普通分包。

使用独立分包需要注意:

1.独立分包中不能依赖主包和其他分包中的内容,包括js 文件,template,

2.wxss,自定义组件,插件等,主包的app.wxss 对独立分包无效。应避免在

3.独立分包页面中使用 app.wxss 中的样式。

4.App 只能在主包中定义,独立分包中不能定义 App 会造成无法预期的行为。

5.独立分包中暂时不支持使用插件。

注意事项:

(1) 关于 getApp()

与普通分包不同,独立分包运行时,App 并不一定被注册,因此,getApp()

也不一定获得App 对象,

当用户从独立分包页面启动小程序时,主包不存在,App 也不存在,此时调用

getApp 获取到的是undefined 。当用户进入普通分包或者主包时,主包才会

被下载, App 才会被注册。

当用户从普通分包或者主包的页面挑到独立分包的时候,主包已经存在,此时

调用getApp(),才能获得真正的App。

为了满足独立分包中的这一需求,基础库2.2.4 版本开始getApp 支持,

allowDefault 参数,在 App 未定义的时候返回一个默认实现。当主包

加载 App 被注册的时候,默认实现中被定义的属性会被合并覆盖到默认的App 中。

示例:

const app = getApp({allowDefault:true})
      app.data = 456
      app.global = {}
     .app.js 中
      App({
        data:12
        other:'hello
      })                                                                   
 console.log(getApp()) // {global: {} ,data: 456,other: 'hello'}

(2) 关于 App 的生命周期

当从独立分包中启动小程序时,主包的中的onLanch 和首次 onShow 会从

独立分包页面首次进入主包或普通分包页面时调用。

分包下载:

开发者可以通过配置,在进入小程序某个页面时,由框架自动预下载可需要的分包。

提升进入后续分包页面的速度,对于独立分包,可以预下载主包。

配置方法:

预下载分包行为在进入某个页面的时候触发,在通过app.json 增加 preloadRule

{
 "pages": ["pages/index"],
 "subpackages": [
 {
 "root": "important",
 "pages": ["index"],
 },
 {
 "root": "sub1",
 "pages": ["index"],
 },
 {
 "name": "hello",
 "root": "path/to",
 "pages": ["index"]
 },
 {
 "root": "sub3",
 "pages": ["index"]
 },
 {
 "root": "indep",
 "pages": ["index"],
 "independent": true
 }
 ],
 "preloadRule": {
 "pages/index": {
 "network": "all",
 "packages": ["important"]
 },
 "sub1/index": {
 "packages": ["hello", "sub3"]
 },
 "sub3/index": {
 "packages": ["path/to"]
 },
 "indep/index": {
 "packages": [""]
 }//欢迎加入全栈开发交流圈一起学习交流:582735936
 }//面向1-3年前端人员
}//帮助突破技术瓶颈,提升思维能力

preloadRule 中,key 是页面路径, value 是进入此页面的 预下载配置,每个配置都

有以下几项。

字段 类型 必填 默认值 说明
packages StringArray 进入页面后预下载分包的 root 或 name。APP 表示主包。
network String WiFi 在指定网络下预下载,可选值为:all: 不限网络 wifi: 仅wifi下预下载

限制

同一个分包中的页面享有共同的预下载大小限额2M,会在工具打包时校验。

如:页面A 和页面B 都在同一个分包中,A 中预下载大小为0.5 M的分包,

B 中最大多只能预下载大小1.5 的分包。

结语

欢迎加入全栈开发交流抠抠裙一起学习交流:582735936

感谢您的观看,如有不足之处,欢迎批评指正。了解更多

上一篇下一篇

猜你喜欢

热点阅读