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

背景

做过小程序项目的同学应该都有这样的经历项目做着做着突然发现代码包的大小超过了 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"
  }
}

js文件

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