为什么写该系列文章?
对我来言,主要有以下原因:
个人成长:构建体系作为前端工程化中的重要一环,有必要进行全面的知识梳理和查漏补缺,同时也是对我这几年工作的总结和复盘工作需要:我目前所处的团队是做CICD
流程相关的,涉及到大量前端工程化相关的知识。自研平台上每天都有几百条流水线在运行,而我作为团队中的核心前端开发人员,经常被邀请帮助其他团队解决各种奇奇怪怪的构建过程中的报错问题对象需要:是的,你没有看错,为了能让女朋友轻松的本系列由于知识系统太过于庞大,因此我将其分为三个部分:
Webpack知识体系Rollup知识体系Vite知识体系
该体系总体将以 70%原理 + 30%最佳实践 的方式来进行讲解,确保每个阶段的人群都有不同的收获。
对于一些重难知识点的讲解,我会对知识粒度进行拆解,尽量以图文的方式进行展示,方便大家理解。
对于偏原理性文章,将采用结论先行、自顶向下的方式进行讲解,注重实现思路,注重设计思想
。
此文作为这个系列的目录,会持续保持更新。保持一周一篇的更新速度,每周一早上发布。
扶我起来,我还能学!!!
抛开现有的这些工具,我们仔细想一想,如果没有这些工具,我们在上线前需要做哪些事情?
解决模块化的问题,由于部分浏览器并不支持ES Module的方式,我们需要将我们的源代码转换成浏览器认识的格式解决CSS、JS代码的浏览器兼容性问题对HTML代码、CSS代码、JS代码、图片等资源进行压缩对未使用的代码或运行不到的代码进行删除将较大的文件分离成多个较小的文件(代码分割)将较小的文件进行合并对 .jsx、.tsx、.vue、.less、.sass等文件进行解析,转换成浏览器能识别的代码(loader解析)进行代码校验以及类型校验对第三方模块进行抽离......不能想了不能想了,想想就头疼......
幸好我们生活在这个科技化时代,要不然每上一次线,就得累死一个前端