栏目整理了前端开发工作流程中与提升效率有关的知识要点和典型案例,给你构建一个系统化的前端开发效率知识结构,建立合理的难题解决策略,使你开始效率改进时有据可依。
课程内容分别从开发效率、构建效率和布署效率3个层面来进行详细讲解。
第一部分:开发效率。开发是我们日常工作过程中最熟悉的部分。工欲善其事必先利其器,在这一部分,栏目主要分析各种项目在开发过程中的提升效率点,例如在项目启动时如何选择和配置自定义脚手架、如何配置我们的开发联调环境等效率改进细节,还会介绍时下流行的云开发、无代码工具、低代码工具等提效新思路。学习之后,能够在未来的项目开发中自如地选择和搭建最适合自身的开发工具集。
第二部分:构建效率。栏目将会分析那些影响webpack构建时间的关键因素,并详细分析对应的解决方案和工具。此外,栏目也会进一步详细讲解webpack5中新的提升效率方案,带你了解no-bundle类构建工具的优缺点。通过这些内容的学习,你将建立完整的构建工具改进思路,进一步改进项目构建效率,最大程度省去那些无谓的等待时间。
第三部分:布署效率。代码从构建到布署是前端开发能力的延伸。许多企业日常工作中的代码布署使用的是前后端通用的CI/CD系统,而很少有前端开发人员在使用过程中能对其中的流程效率开始改进。在这一部分,我将为你介绍业界常用的CI/CD系统,分析其中前端项目的效率改进点,以及从打包机方案到容器化方案、前端项目在布署时的注意点和改进空间。学习完这部分内容,你能结合所在企业的技术特点,来打造或改进适合你前端项目的布署流程。
课程列表
第一部分:开发效率
- 01 项目基石:前端脚手架工具探秘
- 02 界面调试:热更新技术如何开着飞机修引擎?
- 03 构建提速:如何正确使用SourceMap?
- 04 接口调试:Mock工具如何快速进行接口调试?
- 05 编码效率:如何提高编写代码的效率?
- 06 团队工具:如何利用云开发提升团队开发效率?
- 07 低代码工具:如何用更少的代码实现更灵活的需求?
- 08 无代码工具:如何做到不写代码就能高效交付?
第二部分:构建效率
- 09 构建总览:前端构建工具的演进
- 10 流程分解:Webpack的完整构建流程
- 11 编译提效:如何为Webpack编译阶段提速?
- 12 打包提效:如何为Webpack打包阶段提速?
- 13 缓存优化:那些基于缓存的优化方案
- 14 增量构建:Webpack中的增量构建
- 15 版本特性:Webpack5中的优化细节
- 16 无包构建:盘点那些No-bundle的构建方案
第三部分:部署效率
- 17 部署初探:为什么一般不在开发环境下部署代码?
- 18 工具盘点:掌握那些流行的代码部署工具
- 19 安装提效:部署流程中的依赖安装效率优化
- 20 流程优化:部署流程中的构建流程策略优化
- 21 容器方案:从构建到部署,容器化方案的优势有哪些?
- 22 案例分析:搭建基本的前端高效部署系统
- 结束语 前端效率工程化的未来展望