<a href="#">微信小程序主包超大？教你一招减少主包体积</a>

2022-12-04 22:21:51

在 Taro 中通过自定义分包 Tabbar 缩减主包体积的详解指南

对于 Taro 微信小程序的开发者来说，主包体积过大一直是一个令人头疼的问题。体积过大会影响小程序启动速度，甚至在审核过程中遭到拒绝。本文将深入探讨一种通过在分包中实现自定义 Tabbar 来有效缩减主包体积的方法，提升小程序性能和审核通过率。

一、适用场景

Tabbar 使用微信默认配置
主包超出限制大小

二、步骤详解

1. 初始化 Taro 项目

taro init my-app

2. 安装分包插件

npm install --save @tarojs/plugin-split

3. 启用分包插件

在 package.json 中添加：

{
  "plugins": [
    "@tarojs/plugin-split"
  ]
}

4. 创建分包目录

mkdir packages

5. 移动 Tabbar 组件

将 src/components/TabBar.jsx 移动到 packages/tabbar/src/TabBar.jsx。

6. 引入 Tabbar 分包

在 src/app.config.js 中添加：

{
  pages: [
    'pages/index/index',
    'pages/about/about'
  ],
  subPackages: [
    {
      root: 'packages/tabbar/src',
      pages: [
        'tabbar'
      ]
    }
  ]
}

7. 创建自定义 Tabbar 组件

// packages/tabbar/src/TabBar.jsx

import Taro from '@tarojs/taro'
import { View } from '@tarojs/components'

export default class TabBar extends Taro.Component {
  render() {
    return (
      <View>
        自定义 Tabbar
      </View>
    )
  }
}

8. 使用自定义 Tabbar

// src/pages/index/index.jsx

import Taro from '@tarojs/taro'
import { View } from '@tarojs/components'
import TabBar from 'packages/tabbar/src/TabBar'

export default class Index extends Taro.Component {
  render() {
    return (
      <View>
        <TabBar />
      </View>
    )
  }
}