Taro 包体积优化与代码分割实战：拆成三块，把包减掉 40%

Taro 包体积优化与代码分割实战：拆成三块，把包减掉 40%

【免费下载链接】taro开放式跨端跨框架解决方案，支持使用 React/Vue 等框架来开发微信/京东/百度/支付宝/字节跳动/ QQ 小程序/H5/React Native 等应用。项目地址: https://gitcode.com/gh_mirrors/tar/taro

一个 Taro 项目跑久了，最让人不踏实的两个数字是：小程序主包逼近 2MB 的上传上限，H5 首屏越加载越慢。包体积问题大多不是"代码太多"，而是"体积放错了位置"。做 Taro 包体积优化和 Taro 代码分割，最稳妥的办法是把包拆开看——依赖库、业务代码、首屏资源三块，逐块下处方。三块都处理到位，包体积减少 40% 以上是能拿到的结果，首屏速度也会跟着上来。

体积都花在哪了

包体积失控通常来自三个方向，先对号入座：

• 死代码进了包：没被引用的组件、库函数照样被打包；
• 首屏背了不该背的资源：首屏根本用不到的代码和数据被提前加载；
• 第三方依赖本身太重：依赖库在总占比里经常超过 60%。

小程序环境主包普遍有 2MB 上限，超限直接上传失败，即便侥幸通过，运行也会卡。所以优化的起点不是加压缩，而是先弄清楚体积的构成，再决定对哪一块动手。

依赖库：按需引入与轻量替换怎么做

依赖库是占比最大的块，也是收益最快的块。两个动作：换引入方式、换更轻的库。

按需引入怎么做

全量引入 UI 库时，包里会带上你没用的组件。改成从 lib 目录按组件引入：

// 优化前 import { Button, Card, Dialog } from 'taro-ui' // 优化后 import Button from 'taro-ui/lib/button' import Card from 'taro-ui/lib/card'

一行改动，砍掉的是整包未使用组件的体积。

轻量库换哪些

有些场景下，换库比改代码更划算：

判断标准很简单：这个库的核心功能是否只需要其中一小部分。是的话，就值得换。

业务代码：主包瘦身开关怎么开

业务代码这块有两个手段：先摇掉用不上的，再把用上的切开。

Tree Shaking：把死代码摇掉

Tree Shaking 是基于 ES6 模块系统的静态分析，自动移除未被引用的代码。Taro 用 Webpack 配合 SWC 插件实现，编译侧代码在 SWC 编译插件，打包侧在 Webpack5 Runner。

有两个前提，缺一个都不生效：必须用 Webpack5+；要在 mini 配置里打开主包优化开关：

// config/index.js，仓库示例见 examples/mini-split-chunks-plugin/config/index.js module.exports = { compiler: 'webpack5', mini: { optimizeMainPackage: { enable: true, fileType: { templ: '.wxml', style: '.wxss', script: '.js' } } } }

开关打开后，未被引用的代码会在构建期被移除，而不是等到运行时才发现没用。

代码分割怎么切：路由与组件

摇树解决的是"要不要"，分割解决的是"什么时候要"。两种切法：

按路由切，页面各自成块，访问到哪才加载哪：

import { lazy, Suspense } from 'react' const Home = lazy(() => import('./pages/home')) const Profile = lazy(() => import('./pages/profile'))

按组件切，针对体积大、使用频率低的组件单独加载：

import dynamic from '@tarojs/taro/dynamic' const LottieAnimation = dynamic({ loader: () => import('lottie-miniprogram'), loading: () => <Loading /> })

切分粒度不是越细越好。以页面为单位切路由，以体积异常大的组件为单位切动态块，够用即可。

首屏资源：分包边界与 H5 首屏

首屏资源的原则只有一条：第一屏只带必需的，其余延迟到真正需要时再取。

小程序：分包边界怎么划

小程序里对应的手段是分包加载。主包只保留首屏页面，重型依赖放进独立分包。仓库里的 mini-split-chunks-plugin 示例 就是把大的 3D 库和加密库单独放走：

{ "dependencies": { "threejs-miniprogram": "^0.0.8", "miniprogram-sm-crypto": "^0.3.7" } }

这类库摇不轻也切不细，最合理的去处就是它自己的分包，用到对应功能时才触发下载。

H5：首屏只带关键资源

H5 端由 Taro Runner Utils 承担首屏调度：资源按优先级排序，关键 CSS 内联进文档，非关键资源延迟加载。

别忽略静态资源。图片这类文件不算"代码"，但一样进包、一样占体积，示例工程里一张列表页图片就有几百 KB。大图解压（压缩、换格式）和按需加载，和摇树是同级的收益来源。

如何验证与量化

优化不能靠感觉，每做完一块就要量一次。分析工具用官方的 analyzer 插件：

npm install @tarojs/plugin-analyzer --save-dev taro build --type weapp --analyzer

跑完看两件事：最大的模块是谁、它在哪块（依赖 / 业务 / 首屏）。再对照下面各组收益区间，判断当前做法是否落在合理范围：

三项叠加是 40% 以上总体收益的来源。哪一项明显低于区间下限，就说明那块的落地有问题，回到上一节检查。

落地时容易踩的边界

这些约束不满足，上面的手段会静默失效，且构建不会报错：

• Tree Shaking 不生效：摇树只认 ES 模块的 import/export。依赖是 CommonJS（require）就分析不出来；另外检查 babel 配置，若把 ES 模块转成了 CommonJS，摇树同样会失灵。
• 分包加载失败：小程序主包体积不能超过 2MB，这是硬上限；分包之间引用资源必须用绝对路径，相对路径会解析到错误的包。
• 第三方库无法分割：Node 模块先考虑用webpack-node-externals排除出打包范围；仍需要切分时，手动配置splitChunks规则指定边界。

下一步

接下来只需要做一个动作：跑一次taro build --type weapp --analyzer，找到体积占比最大的模块，按"依赖库 / 业务代码 / 首屏资源"归类，再决定是摇、是切、还是换。日常健康检查可以用taro doctor维持。

延伸入口：Taro 性能优化文档、各端优化示例、SWC 配置定义插件。

【免费下载链接】taro开放式跨端跨框架解决方案，支持使用 React/Vue 等框架来开发微信/京东/百度/支付宝/字节跳动/ QQ 小程序/H5/React Native 等应用。项目地址: https://gitcode.com/gh_mirrors/tar/taro