微医前端带你从头建立构建体系【开篇】

杨毅臻，微医前端技术部平台支撑组，全宇宙最 Open 的前端团队~

此文作为这个系列的目录，会一直更新。

目录

关于微医

微医是国际领先的智能化数字健康平台，总部位于杭州。微医以“健康有道，就医不难”为使命，十年来始终致力于通过创新和科技推动中国医疗健康产业数字化、智能化，为全社会提供优质、高效、可及的医疗健康服务，守护亿万人健康。

微医前端技术部目前 90+个前端小伙伴，负责微医集团全端、全栈、全场景的产品研发工作，主要技术栈 Vue（SSR）、React（RN）、Node（BFF），崇尚工程师文化，探索技术极限，致力于用代码让全民医疗健康作出美好改变！

专栏系列计划

为什么要做专栏系列

• 多人头脑风暴，研究完整体系并输出，提升技术氛围
• 总结内部的最佳实践，提升公司整体水平，反哺架构

结束时间

• 计划在 6 月底（第二季度）之前结束

为什么选择构建体系

面试属于薄弱点

贴几个面试题

• 聊一聊 webpack 的优化手段，说说你熟悉优化手段的原理
• tree-shaking 的原理，哪些情况属于副作用，在 rollup 和 webpack 的不同表现
• webpack 的打包原理及产物是如何执行的，动态加载呢，如何缓存的，与 rollup 的区别

抛开我们的日常开发，这块的细节平时使用频率较低，因此如果不经过系统学习非常容易触及知识盲区~

整个体系比较大

相信不少人之前就有尝试学习过 webpack，但总是学了就忘（官网文档确实挺多的），要系统掌握费时费力还不容易记住。

同时作者写这个系列容易烂尾，因为要花很大时间研究和学习；但它特别适合我们集体进行研究、输出。

基建基础

包含了

• 优化项目
• 工程能力
• 编译原理
• 架构方案

无论是流程还是提效，这都是团队绕不开的技术能力储备。

专栏内容

ps.多人协作、按模块分工，因业务增长导致排期不一致，所以文章可能不会按照顺序产出，但是每一篇都是独立的且不影响阅读体验，也可以先收藏等养肥了再从头开始看。

整个专栏会以webpack5、vite、rollup为核心展开，从框架基本原理分析到自己实现最后是一些我司的最佳实践及架构级别的探索。

• 构建基础：针对当下比较热门的工具进行介绍
• 逐渐深入：分别进行原理解析及简单实现
• 建立体系：共同点分析及差异化对比提炼整个构建体系
• 实战内化：公司的最佳实践及实战探索

你能从中收获什么

针对不同阶段的同学都能够收获

• 构建认知：清楚理解什么是构建，为什么要构建以及不同构建工具的区别
• 面试知识：最新鲜原理分析，整个构建流程经历了哪些步骤分别做了什么
• 最快入门：快速搭建、优化构建的解决方案，配置案例拿走就用
• 基建储备：提供一些踩坑案例，公司内部的探索，说不定对你有启发，欢迎探讨

构建演进史

石器时代

这里列举的是 node 还没有普及起来, 当时前端的作用大都是动效切图仔。

稍微复杂一点的场景，会将我们的业务代码(js、css)使用代码压缩工具(这个网上就有在线版)进行手动压缩、混淆类似于 jquery.min.js 这样的版本, 最后会放到 CDN，这个时候只有手动整合打包产物。

我们通过立即调用的函数表达式(IIFE)来实现最初的模块化概念，避免污染全局执行环境去使用一些第三方模块方式，但是他们之间的依赖顺序和冲突依旧存在。

此时有了代码脱敏和减少体积的概念，然而我们还是有大量人工整理工作，因此我们需要易用性；有了模块化的概念却依旧需要更细粒度的解耦。

青铜时代

AMD & CMD —— 题外，属于模块化

浏览器没法使用 commonjs，使得代替他的俩种模块化规范 —— require.js（AMD）和 Sea.js（CMD）大放异彩。使用这俩个方案可以帮助我们有效的拆分代码，组织代码，在原来粗暴的模块化方式上又进了一步，诞生了依赖与结构的概念。

这是影响 bundle 格局非常重要的痛点。

农业时代

node 的普及与成熟，让构建更近了一步。

此时前后端分离的概念已经逐渐清晰起来，前端开始脱离服务端代码或是 framemaker，自己进行项目维护和 package。

nodejs 的诞生伴随着 npm 和 commonjs 的到来，上个时代的"模块化"被天然的支持起来，有了模块化的概念各种第三方库便如雨后春笋般冒尖了。

ES6

import/export 则是 ES6 提出的 Esm 模块化规范，随着 ES6 的覆盖，AMD 和 CMD 的战役终于结束了，同时也加速了 bundle 的额外功能，编译（babel）。

在线编译时间太长了，影响体验，能否把编译时间存留在打包前置阶段呢？

打包工具的诞生

webpack、grunt、glup 等，诞生核心都是模块打包器，通过一系列可操作的配置对文件进行预编译与整合。

这些打包工具在配置上各有千秋，grunt 自动化执行任务、webpack 偏按照能力进行配置、glup 偏工作流式链式调用。

使用姿势各有千秋，配套生态跟不上才是关键因素。

webapck 以强大的 code splitting 和配置化的低门槛占领高地。

此时 bundle 只负责输出最终产物，随着业务的复杂度，不能每次自己打包部署在不同环境吧？多场景多环境需要更多能力满足我们的开发效率。

工业时代 —— 当下

简单说就是工程化，同时对于体验、兼容性、性能、多环境等更高层次的追求需要打包工具去逐步升级。

结合 npm 的生态圈，这些都不成问题，所以当时也有人笑称配置工程师。

webpack 从一个模块打包器开始蜕变，因为其开放性设计，被许多工具作为底层进行二次封装。

vue-cli、create-react-app、umi

vue、react 的兴起与之配套的自动化工具逐渐进入视野，更加的易用，把更多的配置默认收敛到工具内部，减少心智负担。

覆盖从源码到构建产物的每个生命周期，支持各种功能扩展和业务需求(截至 umi)。

rollup

站撸 ES6，hooks 式的配置更轻，TreeShaking 的效果更好，我司当前开发 sdk 和工具库都是使用它快速出活。

未来 —— bundless

vite、snowpack

终端将前端拉近用户，它的进步决定前端的进步，浏览器端已经支持了 ESM （script 的 type 属性设置为 module）, 我们可以更愉快的直出了（区别于中出）。 直出意味着什么？最大程度的做到了按需加载，以及取消编译 ES6！

然而因为兼容性的问题，我们还是不能在产线直接使用 ESM（看具体业务场景），最终还是需要打包（vite在生产环境也是这么做的使用了rollup），相信在未来这个问题会得到改善（http2、终端的迭代进步）。

我们的部分项目也已经开始使用 vite，丝滑的启动和热更新速度让人拍案叫绝。

module federation

webpack5 出了杀招，以模块共享为切入点重新弱化了编译问题，提前编译并使用类似于 DLL 的方式在项目中引入并执行。与其说是提升了打包速度倒不如说是采用了"云"代码的概念，属于跨应用的抽离，在业务复用、微前端等场景留有很大的想象空间。

总结

总结一下贯穿前端发展飞速的这 10 年，演进的核心因素:

更快

• 打包方式
• 直出加载

更小

• 拆分粒度
• 优化方案

更易用

• 生态丰富
• 配置集成

结语

为什么开篇介绍了构建的历史演进，就是希望大家能够看到随着整个前端技术的发展，我们所遇到的问题以及各个优秀的解决方案对我们技术起到翻天覆地的影响。

抛一个小问题，你现在在使用的构建工具是什么，遇到过什么问题，欢迎在评论区讨论

立马收藏我们看整个系列专栏吧 ~

---

看完别忘记对我素质四连，点赞、关注、转发、评论