背景介绍
随着 Web 业务日益复杂化和多元化,前端效率提升已经被很多一线企业作为技术层面的一个重点优化方向。而在面试中,对效率工程化的理解程度和实践中的优化产出情况,也成为衡量前端工程师能力高低的常见标准。对于任何前端从业者来说,效率优化能力不仅能为面试、晋升提供助力,也将沉淀为前端从业者职业生涯的长期价值。
你会学到什么?
专栏梳理了前端开发工作流程中和效率提升相关的知识点和案例,为你构筑一个系统性的前端效率知识体系,建立正确的问题解决思路,让你进行效率优化时有据可依。
专栏共 22 篇,分别从开发效率、构建效率和部署效率 3 个维度来展开讲解。
第一部分:开发效率。开发是我们日常工作过程中最熟悉的部分。工欲善其事必先利其器,在这一部分,专栏主要分析各种项目在开发过程中的效率提升点,例如在项目启动时如何选择和配置自定义脚手架、如何配置我们的开发联调环境等效率优化细节,还会介绍时下流行的云开发、无代码工具、低代码工具等提效新思路。学习之后,能够在未来的项目开发中自如地选择和搭建最适合自身的开发工具集。
第二部分:构建效率。专栏将会分析那些影响 webpack 构建时间的关键因素,并详细分析对应的解决方案和工具。此外,专栏也会进一步讲解 webpack 5 中新的效率提升方案,带你了解 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 | 版本特性:Webpack 5 中的优化细节
16 | 无包构建:盘点那些 No-bundle 的构建方案
第三部分:部署效率
17 | 部署初探:为什么一般不在开发环境下部署代码?
18 | 工具盘点:掌握那些流行的代码部署工具
19 | 安装提效:部署流程中的依赖安装效率优化
20 | 流程优化:部署流程中的构建流程策略优化
21 | 容器方案:从构建到部署,容器化方案的优势有哪些?
22 | 案例分析:搭建基本的前端高效部署系统
结束语
结束语 | 前端效率工程化的未来展望
讲师介绍
李思嘉:贝壳找房前端架构组资深工程师
在前端开发领域有十多年的开发经验,曾先后在多家大型互联网公司从事前端架构工作,在前端工程化领域有比较深厚的知识和经验积累。目前担任贝壳找房前端架构组资深工程师,专注于公司内前端通用构建平台,以及前端开发工具生态的服务建设