点滴生活

Appearance

小程序分包加载优化方案 ​

1. 解决的问题 ​

  • 主包体积过大：主包包含冗余动画资源（如Lottie JSON文件）导致体积超标（如微信小程序 2MB 限制）。
  • 非核心动画阻塞加载：Lottie动画资源与主包耦合，影响首屏渲染速度。
  • 资源冗余：Lottie JSON文件、动画组件未按需加载，主包包含未用到的动画资源。

2. 解决的步骤 ​

步骤 1：分包规划与目录结构调整 ​
  • 主包内容
    保留核心功能：启动页、首页（仅保留基础动画）、全局逻辑、公共工具库。
  • 分包划分
    按动画功能拆分：
    • lottie-animations：复杂动画页面（如引导动画、活动特效、动态教程）
    • user-interaction：交互类动画（如按钮反馈、加载动效）
    • marketing：营销活动页（含独立Lottie动画资源）
  • 目录结构示例：
    markdown
    ├── src
│   ├── main (主包)
│   │   ├── pages
│   │   │   ├── index (首页，仅保留基础动画)
│   │   │   └── login (登录页)
│   │   ├── static 
│   │   │   └── lottie (仅存放首页必需的小型动画JSON)
│   │   └── utils (全局工具库)
│   └── subpackages
│       ├── lottie-animations
│       │   ├── pages 
│       │   │   ├── guide-animation (引导动画页)
│       │   │   └── feature-tutorial (功能教程页)
│       │   └── static (存放大型Lottie JSON文件)
│       ├── user-interaction
│       └── marketing
步骤 2：配置分包路由与Lottie依赖隔离 ​
  • pages.json 分包配置：
    json
    {
  "pages": [
    { "path": "pages/index/index", "style": { ... } },
    { "path": "pages/login/login", "style": { ... } }
  ],
  "subPackages": [
    {
      "root": "subpackages/lottie-animations",
      "pages": [
        { "path": "pages/guide-animation", "style": { ... } },
        { "path": "pages/feature-tutorial", "style": { ... } }
      ]
    },
    {
      "root": "subpackages/marketing",
      "pages": [ 
        { "path": "pages/campaign-page", "style": { ... } } 
      ]
    }
  ],
  "preloadRule": {
    "pages/index/index": {
      "network": "all",
      "packages": ["subpackages/lottie-animations"] // 预加载核心动画分包
    }
  }
}
  • 依赖隔离：
    将 lottie-miniprogram 库仅在主包和必要分包中按需引入，避免全局污染：
    javascript
    // 分包页面中动态加载Lottie
if (typeof requirePlugin !== 'undefined') {
  const lottie = requirePlugin('lottie-miniprogram');
}
步骤 3：静态资源按动画场景隔离 ​
  • 主包资源：
    仅保留首页必需的轻量动画JSON文件（如加载图标，体积 < 50KB）。
  • 分包资源：
    大型动画JSON（如引导页动画、活动页特效）存放至对应分包：
    markdown
    subpackages/lottie-animations/static/animations/guide-animation.json
subpackages/marketing/static/campaign-banner.json
步骤 4：代码优化与按需加载 ​
  • 组件级按需加载：
    将Lottie封装为异步组件，仅在进入动画页时加载：
    vue
    <template>
  <view>
    <async-lottie v-if="showAnimation" :json="animationData" />
  </view>
</template>
<script>
export default {
  data() {
    return { showAnimation: false };
  },
  mounted() {
    // 进入页面后触发加载
    setTimeout(() => {
      this.showAnimation = true;
    }, 100);
  }
}
</script>
  • 依赖压缩：
    使用 lottie-web 的轻量版或自定义构建移除未使用的特性。
步骤 5：构建分析与验证 ​
  • 体积分析：
    通过 微信开发者者工具 检查各分包中Lottie JSON文件分布，确保主包无大文件。
  • 真机测试：
    验证分包动画加载流畅性，监控指标：
    • 主包体积：≤ 1.5MB
    • 首屏Lottie加载时间：≤ 300ms（小型动画）
    • 分包动画首次加载时间：≤ 1s（网络良好）

3. 解决的结果 ​

  • 主包体积可控：Lottie JSON文件从主包移除后，主包体积由 2.1MB 降至 1.4MB。
  • 动画加载性能提升：
    • 首屏基础动画即时渲染（内联base64或小JSON）。
    • 复杂动画按需加载，页面跳转无卡顿（实测分包加载耗时 800ms）。
  • 资源管理清晰：
    • 主包仅包含必需动画，分包按场景隔离大型JSON文件。
    • 动画组件与业务逻辑解耦，支持动态替换。
  • 开发维护便捷：
    • 动画资源通过分包物理隔离，修改不影响主包逻辑。
    • 预加载策略保障高频动画场景流畅性。

关键验证点：

  1. Lottie JSON文件未混入主包 static 目录。
  2. 跨分包跳转使用绝对路径（如 /lottie-animations/pages/guide-animation）。
  3. 使用 requirePlugin 动态加载Lottie库，避免主包初始化负担。