uni-app 小程序主包瘦身指南 - 分包 node_modules

大家好，这里是《前端毕业班》，前端开发者的自救互助小组。在 AI 与不确定性并存的时代，我们一起看清焦虑，聊技术、聊趋势，也聊前端还能走多远，走去哪。

郑重承诺以下内容不由 AI 生成

问题背景

在 5.04 版本之前的 uniapp 和 uniappx，小程序端不支持分包引用的 node_modules 依赖打包到分包中，这对于很多备受小程序主包体积超出困扰的开发者来说，显然不是一个好消息。为了解决这一问题，5.04 版本开始，hx项目或者 cli 项目支持分包引用的 node_modules 依赖打包到分包中，下面介绍下具体的操作步骤。

开启分包优化

首先，需要在 mainfest.json 指定小程序节点下添加如下配置，例如：

{"mp-weixin": {"optimization": {"subPackages": true    }   }}

筛选分包用的依赖

这一步尤为重要，要先梳理出哪些依赖是分包用到的，哪些是主包用到的，以及你期望的主包分包产物引用关系。

我们举一个简单的例子，主包用到了 lodash-es 的 add 和 subtract 函数，分包 sub 用到了 lodash-es 的 multiply 函数，这种分包用到的内容主包没用，就可以考虑使用这种策略，把 分包 sub 用到的 lodash-es 的 multiply 函数打包到 分包 sub 下，我们来看下 5.04 版本之前的效果

首先是项目结构

打包的产物体积

可以看到，用到的 lodash-es 的三个函数都被打包到了主包的 vendor.js 文件中。下面我们看下  5.04 如何解决这种问题

首先进入到分包的根目录，创建一个 package.json 文件，这里写分包需要用到的依赖，安装依赖

然后重新打包即可。可以看到 分包 sub 根目录下面多了 vendor.js 文件，里面就是 lodash-es 的 multiply 函数

测试项目

获取测试项目可以查看此链接 https://ask.dcloud.net.cn/article/42418

注意事项

• 该优化只对 vue3 项目生效
• 支持 uniapp 和 uniappx 的小程序项目
• 支持 hx 项目和 cli 项目，测试项目是 hx 项目，cli 项目同理
• 仅支持 node_modules 中的 js 相关文件，不支持其他文件
• 5.04 是指 hx 的版本号，uniapp 对应的依赖版本为 3.0.0-5000420260318001

写在最后

• 主要攥写者: chouchouji - uni-app 核心成员
• 二作: haoziqaq - varlet 组件库作者
• 三作: rzzf - element-plus 核心成员

欢迎大家进群交流。