微信小程序性能优化

一枚Sin
479 阅读4分钟

1.分包优化

  • 分包的优点：

小程序主包体积太大的话，进入小程序会比较慢，这个时候可以考虑对代码进行分包，可以让用户在进入小程序的时候只加载主包的内容，进入到分包页面的时候才去下载对应的资源，因为主包变小了，首次启动下载时间变短，就可以提高小程序的首屏加载速度，优化用户的体验。

  • 为什么最好要分包：

因为小程序代码每个包有2M的大小限制，如果不分包的话，主包体积最多只能放2M的内容，如果静态资源比较多的话，会很受限制，所以在功能开发规划之初，就最好提前做好分包的打算，主包只放tabBar的页面（至少要放tabBar的页面，分包规则限制），其他跳转的功能页都放到分包里去，这样每个包都有2M的空间可以去使用，就可以自由很多。

  • 如何去分包：

以官方分包示例为例

image.png

一个小程序如果有两个tabBar首页的话，只把tabBar的两个页面放在主包里就好，方便用户首屏加载进入展示，如下app.json文件内容所示。

{
  "pages": [
    "page/tabBar/component/index",
    "page/tabBar/API/index"
  ],
  "tabBar": {
    "color": "#7A7E83",
    "selectedColor": "#3cc51f",
    "borderStyle": "black",
    "backgroundColor": "#ffffff",
    "list": [{
      "pagePath": "page/tabBar/component/index",
      "iconPath": "image/icon_component.png",
      "selectedIconPath": "image/icon_component_HL.png",
      "text": "组件"
    }, {
      "pagePath": "page/tabBar/API/index",
      "iconPath": "image/icon_API.png",
      "selectedIconPath": "image/icon_API_HL.png",
      "text": "接口"
    }]
  }
}

其余不是tabBar的页面可以按照规划进行分包，在app.json文件中添加如下subPackages字段，表示将component目录下的若干页面分为一个分包，API目录下的若干页面作为另一个分包。

{
  "subPackages": [
    {
      "root": "page/component/",
      "pages": [
        "pages/view/view",
        "pages/scroll-view/scroll-view",
        "pages/swiper/swiper",
        "pages/text/text",
        …………………………
      ]
    },
    {
      "root": "page/API/",
      "pages": [
        "pages/login/login",
        "pages/get-user-info/get-user-info",
        "pages/request-payment/request-payment",
        "pages/share/share",
        …………………………
      ]
    }
  ],
}

页面结构上，同一个分包下的内容要在同一个目录下，所以规划分包的同时要规划好文件目录。

image.png

完成这些后，查看代码依赖，就会发现原本304KB大小的主包被拆成了三份，一个主包和两个分包，主包大小的体积减少了一半左右，这样用户进入微信小程序的首屏速度就会变快一些，特别是静态资源比较多的项目。

image.png

  • 分包的限制

上面所说的都是分包的优点，分包也是有一些限制的，主要规则是以下几点：

  1. 单个分包或主包大小不能超过2M。
  2. 整个小程序所有分包的大小加起来不能超过20M。
  3. tabBar页面需要放到主包中。
  4. 当用户进入分包内的某个页面时，才会下载对应的分包，下载完成后再进行展示。
  5. 主包无法引用分包内的私有资源。
  6. 分包之间不能互相引用私有资源。
  7. 分包可以引用主包内的公共资源。
  • 分包前后的项目结构

分包前：

image.png

分包后：

image.png

主包：只包含项目的tabBar页面或启动页面（如果没有tabBar的话）与所有包都需要用到的公共资源（可以被主包和所有分包引用）。

分包：只包含当前分包的页面和当前分包需要用到的私有资源（图片、js、css等），单独分包内的资源只能被该分包引用，无法被主包或者其他分包引用，所以如果是主包或者其他分包也需要用到的资源最好放到主包的公共资源内。

2.分包预加载

在app.json中添加preloadRule节点配置预加载规则，这样可以在小程序进入某个页面后，自动静默预下载可能需要用到的分包，从而提升后续进入分包页面时的启动速度。

  "preloadRule": {//分包预下载规则
    "pages/contact/contact":{
          //触发分包预下载的页面路径，进入该页面后，进行预加载
          //packages表示进入页面后，预下载哪些分包，可以通过name指定预下载哪些分包，
          //需要被预加载的分包，需要在分包定义时给该分包设置"name"属性
      "packages": ["p1","p2"],
          //network表示在指定的网络模式下进行预下载，
          //可选值为: all（不限网络）和 wifi（仅wifi模式下进行预下载），默认值为: wifi
      "network": "wifi"
    }
  },

3.图片压缩

将小程序内静态资源中的图片进行压缩，可以大大减少主包和分包的体积，提高进入小程序的速度，推荐使用TinyPNG进行压缩，TinyPNG拥有智能压缩功能，通过高级压缩算法，可以在不降低图片质量的前提下，大幅减少文件的大小，不损失画质和观感，压缩率大部分可以达到70%上下。

TinyPNG官网地址：tinypng.com/1

4.base64的使用

将小图标或小图片转为base64格式，减少静态资源或网络请求的使用（推荐20KB以下的小图片转为base64）

avatar
文章
阅读
粉丝