最近在开发MST自定义type的过程中，我顺便计算了在一个React项目中引入整套Mobx State Tree带来的对包体积的影响，便于更好的衡量整个方案。在React中使用Mobx State Tree需要3个必备的包，分别是mobx-state-tree, mobx, mobx-react-lite/mobx-react。如果是比较新的项目，不使用Class组件，就选择mobx-react-lite，体积更小。另外，如果使用Create React App作为构建工具，默认情况下会对所有的包进行连接处理，这样就看不出每个包的打包大小了。所以我禁用了这个功能，可能导致结果有一点误差。
分析的包是使用我自己的MST template (www.npmjs.com/package/cra…) 构建出来的一个新的项目，除了MST 3件套外，还包含了React Router、Axios、Styled Component等依赖，以及一点点的业务代码，基本上可以视作一个React项目最精简的情况了。具体的打包结果直接看图，有个直观感受：
粗略来看，MST 3件套的打包体积，和React dom差不多，大概占到整个包的1/3。整个包未压缩状态有1.15MB，Parse后有402KB，Gzip完全压缩后有115KB。其中MST 3件套的详细大小如下：
mobx-state-tree
mobx-state-tree/dist/mobx-state-tree.module.js
- Stat Size: 260.41 KB
- Parsed Size: 93.49 KB
- Gzipped: 18.23 KB
mobx
mobx/dist/mobx.esm.js
- Stat Size: 190.08 KB
- Parsed Size: 52.46 KB
- Gzipped: 15.02 KB
mobx-react-lite
mobx-react-lite/es
- Stat Size: 17.55 KB
- Parsed Size: 5.03 KB
- Gzipped: 1.73 KB
我认为，对于业务型前端应用来说，MST打包后的大小和占比是完全可以接受的，而且在引入组件库等更大体积的第三方库后，占比还会继续缩小。虽然别的数据管理方案可能打包体积更小，但提供的功能很难有MST系统，在开发上可能需要投入更大的成本。所以对于业务型的前端应用来说，用不到35KB的体积，换一个扩展性和维护性都有质的飞跃的前端架构，是一笔很划算的买卖。如果是对包体积极度敏感的移动端应用，那么可以根据实际情况选择是否使用。但鉴于MST 3件套的相对体积约等于react-dom，所以我个人觉得也并非不可接受，如果业务复杂度达到需要数据管理来处理的程度，那么包的体积应该也不会太小。
另外，对于我自己写的自定义type的包，打包压缩之后的体积都在1KB左右，基本可以忽略不计。以下是mst-request-type的打包分析数据
mst-request-type
mst-request-type/dist
- Stat Size: 3.54 KB
- Parsed Size: 1.67 KB
- Gzipped: 0.8 KB
