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

前言

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

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

问题背景

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

分包优化

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

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 函数

测试项目

获取测试项目可以点击 ask.dcloud.net.cn/article/424...

注意事项

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

写在最后

一作: chouchouji [github.com/chouchouji] - uni-app 核心成员
二作: haoziqaq [github.com/haoziqaq] - varlet 组件库作者
三作: rzzf [github.com/rzzf] - element-plus 核心成员