微信小程序首屏优化

1、包体积优化（减少下载和解析时间）

这是首屏加载的“第一公里”，目标是让小程序的代码包尽可能小，下载更快。

1.1 分包加载

• 概念：将小程序分成一个主包和多个分包。启动时只下载主包，进入分包页面时才下载对应的分包。
• 做法：在 app.json 中配置 subpackages，将非首屏页面（如个人中心、商品详情）放到分包中。
• 进阶：使用 独立分包，它的启动不需要依赖主包，对插件小程序或特定场景非常有用。
• 预加载：使用 preloadRule 在空闲时预下载分包，实现分包页面的秒开。

// app.json
{
  "pages": [
    "pages/index/index" // 主包-首页
  ],
  "subpackages": [
    {
      "root": "packageA",
      "pages": [
        "pages/profile/profile" // 分包-个人中心
      ]
    }
  ],
  "preloadRule": {
    "pages/index/index": {
      "network": "all",
      "packages": ["packageA"] // 进入首页后预加载packageA
    }
  }
}

1.2 代码复用与清理

• 使用自定义组件：封装通用UI，减少代码重复。
• 清理无用代码和资源：定期删除未使用的图片、样式和逻辑代码。
• 压缩图片等静态资源：使用合适的图片格式（WebP）、压缩工具，并充分利用CDN。

1.3 开启“按需注入”和“用时注入”

在 app.json 中配置 “lazyCodeLoading”: “requiredComponents”，这是小程序官方的优化，可以确保只有用到的页面和组件才会被注入代码，有效降低启动时的内存和计算开销。

2、网络请求优化（减少数据等待时间）

首屏渲染往往依赖接口数据，网络请求的快慢直接决定首屏展示速度。

2.1 请求合并与提前发起

• 提前请求：在 App.onLaunch 或 App.onShow 中，提前发起获取用户信息、全局配置等首屏必需的请求。
• 请求合并：如果首屏需要多个接口数据，尽量让后端提供一个聚合接口，减少HTTP请求次数。

2.2 数据缓存策略

• 原理：将非实时性要求的数据（如城市列表、配置信息）缓存到本地。
• 做法：采用 缓存优先，网络更新 的策略。页面加载时先立即展示缓存数据，然后再发起网络请求，拿到最新数据后更新视图和缓存。

Page({
  data: {
    list: []
  },
  onLoad() {
    // 1. 同步读取缓存，立即渲染
    const cachedList = wx.getStorageSync('homeList');
    if (cachedList) {
      this.setData({ list: cachedList });
    }
    
    // 2. 同时发起网络请求获取最新数据
    this.fetchHomeData();
  },
  fetchHomeData() {
    wx.request({
      url: 'https://api.example.com/home',
      success: (res) => {
        // 更新视图
        this.setData({ list: res.data });
        // 更新缓存
        wx.setStorageSync('homeList', res.data);
      }
    })
  }
})

2.3 接口性能优化

与后端协商，对首屏接口进行针对性优化，如数据库查询优化、使用缓存等。

3、渲染性能优化（减少白屏时间，提升体验）

当数据和代码都准备好后，如何快速地将内容绘制到屏幕上。

3.1 使用骨架屏

• 概念：在数据加载前，先展示一个与真实页面结构相似的灰色轮廓图。
• 作用：极大提升用户感知的加载速度，减少白屏的焦虑感。这是提升用户体验性价比最高的手段之一。

3.2 优化setData

• 减少调用频率：避免频繁调用 setData，例如不要在滚动的 onPageScroll 中频繁调用。
• 减少数据量：只 set 发生变化的数据字段，避免传递大量无关数据。

// 坏例子：传递了整个对象
this.setData({ someBigObject: newBigObject });

// 好例子：只传递变化的字段
this.setData({ 'someBigObject.needChangeField': newValue });
避免在首屏渲染的初始 setData 中设置过大数据。

3.3 使用WXS处理轻量交互

• 概念：WXS 是小程序的脚本语言，运行在视图层，而不是逻辑层。
• 适用场景：对于一些简单的、高频的交互（如图片懒加载、滚动动画），使用 WXS 可以直接在视图层响应，避免了逻辑层和视图层通信的延迟。

3.4 图片资源优化

• 使用 lazy-load 属性实现图片懒加载。
• 确保图片尺寸合适，避免使用过大的原图。
• 根据网络状况（wx.getNetworkType）动态加载不同清晰度的图片。

4、总结

总结来说，我的优化思路是 从外到内，层层递进：

• 第一步是通过分包和代码优化，让用户下得更快；
• 第二步是通过缓存和请求策略，让数据来得更快；
• 第三步是通过骨架屏和渲染优化，让内容画得更快，体验更好。

在实际项目中，我会优先实施 分包、骨架屏、数据缓存和 setData 优化 这些高性价比的方案，然后再根据具体情况采用其他更精细的优化手段。