微信小程序 - 启动优化总结

最新推荐文章于 2024-08-01 10:26:30 发布

倔强的小绵羊

最新推荐文章于 2024-08-01 10:26:30 发布

阅读量795

点赞数

分类专栏：前端微信小程序文章标签：小程序前端

本文链接：https://blog.csdn.net/lhz_333/article/details/105732858

版权

前端同时被 2 个专栏收录

31 篇文章 2 订阅

订阅专栏

微信小程序

3 篇文章 0 订阅

订阅专栏

前言

公司微信小程序项目目前正在做性能优化处理，本文主要总结下启动优化方面的内容。

启动优化主要从两方面入手：

小程序代码包大小优化
首屏渲染优化

一、小程序代码包大小优化

在小程序初次启动时，需要下载编译后的代码包到本地，随着代码包大小的上升，耗时也会相应增加。

普通分包
独立分包
分包预下载

主包：放置默认启动页面/TabBar 页面，以及一些所有分包都需用到公共资源/JS 脚本

分包大小限制：

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

1、使用分包

分包加载可以将小程序划分为主包和若干个分包，将较少用到的页面或功能划分到若干个分包中，主包内只保留最频繁使用的页面和公共的代码。小程序启动时默认只加载主包，再按需加载分包。

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

在app.json中使用subpackages（也可写成subPackages）字段声明项目分包结构
subpackages配置如下：

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

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

注意：

tabBar 页面必须在 app（主包）内
打包时subpackages配置路径外的目录将被打包到 app（主包）中
分包之间无法共享资源，但可以使用主包，自己分包内的资源

2、独立分包

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

可以将部分对启动性能要求很高的页面放到特殊的独立分包中（如广告页、活动页、支付页等）。当小程序从独立分包页面启动时，只需要下载分包就可以直接运行，可以很大程度上提高分包页面的启动速度，实现小程序的秒开。

在这里插入图片描述

配置方法：在app.json的subpackages字段中对应的分包配置项中定义independent字段声明对应分包为独立分包。

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

注意：

独立分包中不能依赖主包和其他分包中的内容，包括js文件、template、wxss、自定义组件、插件等。
主包中的app.wxss对独立分包无效，应避免在独立分包页面中使用 app.wxss 中的样式；
App 只能在主包内定义，独立分包中不能定义 App，会造成无法预期的行为；
独立分包中暂时不支持使用插件。

3、分包预下载

分包预下载是为了解决首次进入分包页面时的延迟问题而设计的。如果开启了分包加载能力，在用户访问到分包内某个页面时，小程序才会开始下载对应的分包。当处于分包下载阶段时，页面会维持在 “白屏” 的启动态，会影响小程序的使用体验。

在这里插入图片描述

配置方法：在进入某个页面时触发，通过在 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": ["__APP__"]
    }
  }
}

preloadRule 中，key 是页面路径，value 是进入此页面的预下载配置，每个配置有以下几项：

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