从零到亿系统性的建立前端构建知识体系✨（开篇）

一、前言

为什么写该系列文章？

对我来言，主要有以下原因：

• 个人成长：构建体系作为前端工程化中的重要一环，有必要进行全面的知识梳理和查漏补缺，同时也是对我这几年工作的总结和复盘
• 工作需要：我目前所处的团队是做CICD流程相关的，涉及到大量前端工程化相关的知识。自研平台上每天都有几百条流水线在运行，而我作为团队中的核心前端开发人员，经常被邀请帮助其他团队解决各种奇奇怪怪的构建过程中的报错问题
• 对象需要：是的，你没有看错，为了能让女朋友轻松的糊弄面试官，我将其整理成了一个系列（因此，不要怕担心看不懂，我都把你们当我的女朋友来看待了，你还怕什么？不懂直接来喷我！！！我手牵手的教你！！！）

本系列由于知识系统太过于庞大，因此我将其分为三个部分：

• Webpack知识体系
• Rollup知识体系
• Vite知识体系

该体系总体将以 70%原理 + 30%最佳实践 的方式来进行讲解，确保每个阶段的人群都有不同的收获。

对于一些重难知识点的讲解，我会对知识粒度进行拆解，尽量以图文的方式进行展示，方便大家理解。

对于偏原理性文章，将采用结论先行、自顶向下的方式进行讲解，注重实现思路，注重设计思想。

二、目录

此文作为这个系列的目录，会持续保持更新。保持一周一篇的更新速度，每周一早上发布。

标题	模块	内容	难度	发布时间
从构建产物洞悉模块化原理	webpack	原理分析	⭐️⭐️	09.26发布
项目中经常使用的模块懒加载到底是怎么做到的？	webpack	原理分析	⭐️⭐️	暂定2022.10.10发布

三、听说你学不动了？

扶我起来，我还能学！！！

抛开现有的这些工具，我们仔细想一想，如果没有这些工具，我们在上线前需要做哪些事情？

• 解决模块化的问题，由于部分浏览器并不支持ES Module的方式，我们需要将我们的源代码转换成浏览器认识的格式
• 解决CSS、JS代码的浏览器兼容性问题
• 对HTML代码、CSS代码、JS代码、图片等资源进行压缩
• 对未使用的代码或运行不到的代码进行删除
• 将较大的文件分离成多个较小的文件（代码分割）
• 将较小的文件进行合并
• 对 .jsx、.tsx、.vue、.less、.sass等文件进行解析，转换成浏览器能识别的代码（loader解析）
• 进行代码校验以及类型校验
• 对第三方模块进行抽离
• ......

不能想了不能想了，想想就头疼......

幸好我们生活在这个科技化时代，要不然每上一次线，就得累死一个前端。

正是有了这些构建工具，我们才得以解放生产力呀。

因此，对于新技术，我们更多的应该报以积极的心态，相信它的诞生一定是为了解决一些问题而存在，而我们正是工具的使用者。有人为我们写出了更方便更快捷更好用的工具，何乐而不为呢？

四、读完本系列，你将收获什么？

• 如果你是一个刚入行没多久的新人，你将学会一系列的最佳实践以及部分问题的通用企业级解决方案
• 如果你跟我一样，已经是一个工作3-4年的 “老鸟”，你将学会构建体系中涉及到的所有源码实现与设计思想，帮助你完成中级开发到高级开发的跃升
• 如果你已经是一个5年以上的老老鸟，在我这里更多的是查漏补缺，完善自身的知识体系，在遇到相关的问题时，能够快速给出几种不同的解决方案
• 如果你是以面试为目的的人群，能坚持跟着我将整个系列学完，相信在构建领域你是能够轻松吊打一半以上的面试官
• 如果你想练辟邪剑法，希望速成，我也会助你一臂之力（帮你自宫），专门整理出一篇面经文章
• ......

总之，希望能让不同阶段的人群都有收获。

五、最后

构建相关的系列文章往往很容易烂尾，因为要花很大时间研究和学习，笔者在写这个系列之前就足足准备了3-4个月。在这之间往往因为一个小问题想不通就会卡上好几天，但也正是因为这种死磕到底的精神，让我在这几个月对整个前端的认识提升到了一个新的高度。

因此，勇敢走出第一步，不要担心学不会看不懂。

该系列整体难度从易到难，从点状知识点出发，由点成面，最后将带领大家梳理出完整的构建流程。

让我们一起加入 光荣的进化吧