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

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

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

标题	模块	内容
你怎么能够不了解 AST 呢？	公共	原理分析
90 行代码的webpack，你肯定不学吗？	webpack	简易实现
万字长文：关于sourcemap，这篇文章就够了	webpack	原理分析
【Webpack】devServer 实验报告	webpack	原理分析
120 行代码帮你了解 Webpack 下的 HMR 机制	webpack	原理分析
宝啊～谈谈Tapable	webpack	原理分析
Webpack - 手把手教你写一个 loader / plugin	webpack	简易实现
Webpack 实现 Tree shaking 的前世此生	webpack	原理分析
Webpack」从0到1学会 code splitting	webpack	原理分析
webpack 最佳实践	webpack	简易实现
Module Federation你的浪漫我来懂	webpack	原理分析
十分钟了解vite如何支持react	vite	原理分析
站在潮流前沿，快速实现一个简易版 vite	vite	简易实现
10 分钟搞懂 Vite devServer，速来围观！	vite	原理分析
【vite】你不知道的小妙招，肯定不看一下吗？	vite	原理分析
Vue 2 系统如何快速迁移 Vite 做为开发工具	vite	简易实现
无用代码去哪了？项目减重之 rollup 的 Tree-shaking	rollup	原理分析
rollup - 构建原理及简易实现	rollup	简易实现

关于微医

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

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

专栏系列计划

为何要作专栏系列

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

结束时间

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

为何选择构建体系

面试属于薄弱点

贴几个面试题react

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

抛开咱们的平常开发，这块的细节平时使用频率较低，所以若是不通过系统学习很是容易触及知识盲区~jquery

整个体系比较大

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

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

基建基础

包含了面试

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

不管是流程仍是提效，这都是团队绕不开的技术能力储备。vue-cli

专栏内容

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

整个专栏会以webpack五、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），相信在将来这个问题会获得改善（http二、终端的迭代进步）。

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

module federation

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

总结

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

更快

打包方式
直出加载

更小

拆分粒度
优化方案

更易用

生态丰富
配置集成

结语

为何开篇介绍了构建的历史演进，就是但愿你们可以看到随着整个前端技术的发展，咱们所遇到的问题以及各个优秀的解决方案对咱们技术起到翻天覆地的影响。

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

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

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