小程序：如何合理规划分包使主包不超过2M

背景

做过小程序项目的同学应该都有这样的经历，项目做着做着，突然发现代码包的大小超过了 2M，小程序无法提审，然后痛苦的删文件改代码来减少包大小。

虽然我们也知道小程序给我们提供了分包的功能可以减少主包的大小，但是我们在一开始做项目的时候可能不会去规划然后一股脑放在主包里，当超过后才考虑哪些要放在分包里，这时候再去重构就会比较复杂了，今天我们来讨论一下如何合理的规划分包来避免代码包体积的问题。

思路

我们知道，小程序对代码的包大小有一些规则：

• 整个小程序所有分包大小不超过 20M。
• 单个分包/主包大小不能超过 2M。

那么首先，我们要挑出项目中比较大的文件，以我们项目为例，主要有两个：
1、vant 组件库（300K左右）
2、echarts 图表库（1M左右）

这样可以预见的是目前已经有1.3M的库了，加上一些插件也会打包进主包里，所以我们不能把这些库放到主包里，那么我们要讨论的问题有两个：
1、这些库放在哪里
2、确定放在哪之后，主包和其他分包如何依赖这些库

讨论1：这些库放在哪里

• 方式一：放在业务的分包
• 方式二：放在独立的分包

方式一

比如，当某个业务分包要使用 vant 库，就把 vant 库直接放在这个分包里。

• 优点：
  • 分包独立，不依赖外部
• 缺点：
  • 1、组件库冗余，可能会造成每个分包里都有一个组件库。
  • 2、需要更新时，各个分包使用的组件库版本可能会不统一（虽然也无伤大雅）
  • 3、主包无法依赖

总结：
对于缺点1很严重，整个小程序所有分包大小不超过 20M，用这种方式会极速膨胀，所以这种方式不适合
2，其实影响不大
3，可以按照方式二建立一个组件库分包，只供主包使用。

方式二

我们新建一个分包，里面只放 vant 库。
当某个业务分包要使用 vant 库，则依赖这个独立的分包（可以使用分包异步化）。

• 优点：
  • 统一管理
  • 主包和分包都可以依赖
• 缺点：
  • 1、使用分包异步化可能会有小的延迟。
  • 2、当库需要更新的时候，影响面比较大。

总结：
对于缺点1，无解，但是影响也不大
对于缺点2，无解，影响可大可小吧，现在的也基本上是这么干的

总结

方式一问题太大，不能用
方式二看起来会更好一些，虽然也有一些可能会遇到的问题，但是都不算很严重。

讨论2：主包和其他业务分包如何更优雅的依赖分包中的库

使用alias进行依赖，一些小程序第三方框架都会支持，或者自己用 webpack 配置 alias，使用如下：
json文件

{
  "usingComponents": {
    "van-button": "~@/subpackage-components/vant/button/index"
  },
  "componentPlaceholder": {
    "van-button": "view"
  }
}
1
2
3
4
5
6
7
8

js文件

const echarts = await import('@/subpackage-echarts/ec-canvas/echarts.js')
1