意见箱
恒创运营部门将仔细参阅您的意见和建议,必要时将通过预留邮箱与您保持联络。感谢您的支持!
意见/建议
提交建议

javascript - 从零到亿系统性的建立前端构建知识体系✨(开篇)_个人文章

来源:恒创科技 编辑:恒创科技编辑部
2024-01-29 17:00:59
一、前言

为什么写该系列文章?

对我来言,主要有以下原因:

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

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


javascript - 从零到亿系统性的建立前端构建知识体系✨(开篇)_个人文章

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解析)进行代码校验以及类型校验对第三方模块进行抽离......

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

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

上一篇: java - JAVA 常见ORM框架汇总 - 附一款eloquent-orm_个人文章 下一篇: 手机怎么远程登录云服务器?