忍不住剧透一下 wepack了

halo 大家好，我是 132，大家好久不贱鸭！最近我在公司写的轮子 wepack 有了一些新的进展，可以说非常非常赞，但是距离开源还十分遥远，所以我忍不住想要剧透一下了

是什么

wepack 是一个微信小程序打包器，支持将微信小程序打包成h5，然后跑在沙箱里（微前端，worker，jscore）

这是一个打包工具，同时也是小程序引擎的全部，和微信不同的是，整个打包器都是从零手写的，而且拥有和 webpack 类似但更好的机制

为什么放弃 webpack

我来到公司接收的小程序工程是非常复杂的，它总共五个分包，使用 lerna 进行管理，其中编译器需要经过三次打包，先将微信的 dsl 转译为 react 的 dsl，然后再扭曲转译 react 文件，最终使用 webpack 进行打包

一个工程，需要打包接近十次，这每一次打包都使用插件去修改，扭曲语义，整个链路十分复杂，无论是开发和调试都异常痛苦

所以我发现 webpack 最致命的，其实不是编译速度慢，而是开发链路太长

越是大型项目，webpack 的体验越糟糕，加上插件系统的滥用，导致很多人盲目地去 casebycase，去扭曲语义……

解

我意识到要想解决这个问题，必须手写一个打包器，使用数据结构去抽象，概括业务场景，利用靠谱的编译知识去梳理链路

事实上，我不是第一个意识到这个问题的人，RN 团队早就写了 metro： facebook/metro

只是我面对的不是 RN，而是小程序项目

为此，我花了两个月的时间，去冥思，试探，终于，写得差不多了……

先放图

ADT

前面说了，我们不能继续 casebycase 了，必须通过数据结构去高度抽象整个小程序项目，为此，我构建了一棵树，全称是 Asset dependency tree

这棵树，从 app.json 为入口，将整个小程序的依赖关系捋顺，每个小程序文件为一个 asset，携带基本信息的同时，还自带一个 parser 和 generator

请注意，我们不去修改 AST，修改 AST 是非常愚蠢的行为，任何时候，扭曲 js 语义的行为都是下下策

我会遍历 AST，然后取有用的信息，将它构建到 ADT 中，进行后续所有操作

可以说，ADT 的构建和遍历，是 wepack 中最核心的，当然帅气的脸都是千篇一律的

webpack 的 dependency graph，rollup 的 module graph，大家做的都是同一件事

好了，最最最核心的东西说完了，接下来说一些令人兴奋的

tree shaking

可以说是现代打包工具必备的 feature 没有之一，想象一下，你的小程序项目，那些没有用到的组件和 API 可以被摇掉，是一件多么刺激的事！

同样一个项目，你上传到微信平台，可能需要 10M，但是如果上传到携程平台，可能就是 5M 了，这和 google play 的体积优化一样让人心动

这在其他打包工具中是很难做到的，年后我会具体分享为什么做不到，这里就不剧透太多啦

module federation

module federation 通俗来说，就是一个高级的全局变量，挂到上面的是编译好的内容，这也是 webpack5 的核心 feature

有了它，就可以从外部注入组件和 api 了，因为微信的 api 和组件超级多，凭借我一人之力不可能完全模拟完

所以我实现了 mf 机制，如果你的缺失了组件和 api，则可以直接从外部注入，它会和主项目一起打包

code splitting

这个功能是顺便捎带的，其实小程序基本上没啥用，因为小程序不支持 import()

说白了就是将 import() 的文件做单独的拆分打包，过去在 webpack 中是很常见的，尤其是 ssr 路由的时候

支持它不难，所以随手捎带一下下，指不定微信以后放弃 es5 了呢

hot module replacement

热更新，同样是微信不支持……但是理论上讲 wepack 可以做到，这块我还没有实现，但是未来如果携程自己的 ide 能够支持 ws 通信，是完全可以做的

总结

以上，剧透完啦，其实统统都是围绕 ADT 来做的，具体到底是什么做的，大家可以期待一下开源，大概年后啦！

另外，我还是要感谢一些我的 leader，真的……因为我是一个慢热的人，搞个东西都是冥思一个月，代码一周，感谢 leader 在我前段没有产出的时间里，给予的信任

现在终于有进展了，万幸

当然，因为是在公司写的工具，还是要服务公司为主，后面的任务还是很艰巨，要应对错综复杂的业务场景……

但我始终坚信，数据结构乃造轮之道，只要这个结构是我自己的，我就可以概括出 90% 的 case~

题外话

最后说一点题外话，我上周血常规异常，怀疑白血病，然后做了流式免疫分型，最终死里逃生，万幸

白血病有上百种不同分型，这件事让我懂了很多，我研究了许久，现在可以读懂流失细胞图和免疫组化的报告了

而且我发现了商机，那就是流式细胞仪，真的有门槛！无论是设门，还是表型标记，都很有意思，而且免疫分型的归类，证据都很难判读，我想如果有朝一日我能从事这种职业就好了

细胞学，遗传学，基因学，我一直憧憬着，哈哈哈