小程序分包技巧

可爱亲宝宝
2,145 阅读4分钟

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动

微信小程序分包说明

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

在构建小程序分包项目时，构建会输出一个或多个分包。每个使用分包小程序必定含有一个主包。所谓的主包，即放置默认启动页面/TabBar 页面，以及一些所有分包都需用到公共资源/JS 脚本；而分包则是根据开发者的配置进行划分。

在小程序启动时，默认会下载主包并启动主包内页面，当用户进入分包内某个页面时，客户端会把对应分包下载下来，下载完成后再进行展示。

目前小程序分包大小有以下限制：

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

分包使用

在pages.json文件中，添加subPackages分包，root是分包路径，可以用多个分包。pages就是指该分包下的页面路径。

{
    "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"]
        }
    }
}

独立分包

独立分包是小程序中一种特殊类型的分包，可以独立于主包和其他分包运行。从独立分包中页面进入小程序时，不需要下载主包。当用户进入普通分包或主包内页面时，主包才会被下载。

开发者可以按需将某些具有一定功能独立性的页面配置到独立分包中。当小程序从普通的分包页面启动时，需要首先下载主包；而独立分包不依赖主包即可运行，可以很大程度上提升分包页面的启动速度。

一个小程序中可以有多个独立分包。

"subpackages": [
    {
      "root": "moduleA",
      "pages": [
        "pages/rabbit",
        "pages/squirrel"
      ]
    }, {
      "root": "moduleB",
      "pages": [
        "pages/pear",
        "pages/pineapple"
      ],
      "independent": true
    }
  ]
}

"independent":true就是独立分包，独立分包是不能依赖主包和其它分包中的内容，包括js文件，template，自定义组件等。也就是说如果分包中用到主包公用的东西，就不要使用。

分包预载配置

配置preloadRule后，在进入小程序某个页面时，由框架自动预下载可能需要的分包，提升进入后续分包页面时的启动速度。

"preloadRule": {
        "pagesA/list/list": {
            "network": "all",
            "packages": ["__APP__"]
        },
        "pagesB/detail/detail": {
            "network": "all",
            "packages": ["pagesA"]
        }
    }

packages：进入页面后预下载分包的 root 或 name。__APP__ 表示主包。

network：在指定网络下预下载，可选值为：all（不限网络）、wifi（仅wifi下预下载）。

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

分包优化

对于微信，百度，qq,头条，可以在manifest.json文件使用 "optimization": { "subPackages": true }进行分包优化。

  • 静态文件：分包下支持 static 等静态资源拷贝，即分包目录内放置的静态资源不会被打包到主包中，也不可在主包中使用

  • js文件：当某个 js 仅被一个分包引用时，该 js 会被打包到该分包内，否则仍打到主包（即被主包引用，或被超过 1 个分包引用）

  • 自定义组件：若某个自定义组件仅被一个分包引用时，且未放入到分包内，编译时会输出提示信息

    "mp-weixin" : { "appid" : "wxxxxxxx", "setting" : { "urlCheck" : false, "postcss" : false, "minified" : true }, "usingComponents" : true, "permission" : { "scope.userLocation" : { "desc" : "你的位置信息将用于小程序位置接口的效果展示" } }, "plugins" : { "sendCoupon" : { "version" : "1.2.1", "provider" : "wxxxxxxx" } } "optimization" : { "subPackages" : true } },

压缩vendor.js

如果是用uni-app进行分包，可以对verndor.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"

avatar
文章
阅读
粉丝