课程简介

我是李思嘉从事前端开发十余年，曾先后在多家大型的互联网公司从事前端架构方面的工作，经历了很多项目从 0 到 1 的搭建过程，也做了不少前端效率优化和性能提升等工程化的实践。
目前，我在贝壳找房前端架构组担任资深架构师，专注于从事公司内前端通用构建平台以及前端开发工具生态的服务建设。工作中我接触过不少的项目，搭建、开发提效、构建优化、部署工具，还有容器化等方面的一些具体技术细节，也沉淀出了一套关于前端工程化的方法论，希望在这里能够分享给你。首先，我们来谈一谈为什么要学习前端效率工程化，通常一个中高级的前端工程师除了完成业务功能的开发目标外，还需要对所开发项目的效率、性能、质量等工程化维度去制定和实施技术优化的目标，其中提升效率为目标的优化技术和工具就属于效率工程化的范围，对于公司而言，团队效率可以直接带来人工投入、产出比的提升，此效率提升通常会被作为技术层面的一个重点的优化方向。而在面试中，对效率工程化的理解程度和实践中的优化产出情况也是衡量前端工程师能力高低的一个常见标准。
例如在拉勾网搜索前端相关职位就可以看到，中高及以上的前端工程师岗位需求中大多会要求熟练掌握向外 pack 构建工具、具备开发效率、实践经验等。只有具备了这方面的能力，你才能够应对和优化复杂项目，保证团队的高效产出。
然而，大部分时间都投身在业务开发中的前端同学，在效率工程化方面经常会面临的很多困扰。由于缺乏系统知识，对于项目中的效率问题常常不知道从何处着手，甚至找错了解决方向。
在解决项目构建效率问题时，考虑的通常都是增加优化插件的方向，但有时候问题的关键点可能只是一些 source map include，基本参数的设置不当。
另外，由于缺少工程化视野，就难以发现工作中的效率提升点，以制定针对性的提升方案，这样就导致了技术优化实践少，成长慢。在技术晋升和面试求职中，由于缺少了方法论和深度思考，在讲解技术优化细节时，常常回答的不完整或者有错漏混淆，就很难在能力表现上脱颖而出。要解决这些问题，单单凭借个人知识积累，往往成长缓慢，难以打开视野，最有效的方式是找到自己的短板来做针对性提升。
而只有全面的、系统的掌握效率的影响因素以及其中针对性的细节，才能在面对实际问题时明确分析思路，快速的找到症结所在来制定针对性的优化方案。

课程目录

[4357]开篇词建立上帝视角，全面系统掌握前端效率工程化.md
[4415]01项目基石：前端脚手架工具探秘.md
[4416]02界面调试：热更新技术如何开着飞机修引擎？.md
[4417]03构建提速：如何正确使用SourceMap？.md
[4418]04接口调试：Mock工具如何快速进行接口调试？.md
[4419]05编码效率：如何提高编写代码的效率？.md
[4420]06团队工具：如何利用云开发提升团队开发效率？.md
[4421]07低代码工具：如何用更少的代码实现更灵活的需求？.md
[4422]08无代码工具：如何做到不写代码就能高效交付？.md
[4423]09构建总览：前端构建工具的演进.md
[4424]10流程分解：Webpack的完整构建流程.md
[4425]11编译提效：如何为Webpack编译阶段提速？.md
[4426]12打包提效：如何为Webpack打包阶段提速？.md
[4427]13缓存优化：那些基于缓存的优化方案.md
[4428]14增量构建：Webpack中的增量构建.md
[4429]15版本特性：Webpack5中的优化细节.md
[4430]16无包构建：盘点那些No-bundle的构建方案.md
[4431]17部署初探：为什么一般不在开发环境下部署代码？.md
[4432]18工具盘点：掌握那些流行的代码部署工具.md
[4433]19安装提效：部署流程中的依赖安装效率优化.md
[4434]20流程优化：部署流程中的构建流程策略优化.md
[4435]21容器方案：从构建到部署，容器化方案的优势有哪些？.md
[4436]22案例分析：搭建基本的前端高效部署系统.md
[4437]结束语前端效率工程化的未来展望.md
文档
[4357]开篇词建立上帝视角，全面系统掌握前端效率工程化.mp4
[4415]01项目基石：前端脚手架工具探秘.mp4
[4416]02界面调试：热更新技术如何开着飞机修引擎？.mp4
[4417]03构建提速：如何正确使用SourceMap？.mp4
[4418]04接口调试：Mock工具如何快速进行接口调试？.!mp4
[4418]04接口调试：Mock工具如何快速进行接口调试？.mp4
[4419]05编码效率：如何提高编写代码的效率？.!mp4
[4419]05编码效率：如何提高编写代码的效率？.mp4
[4420]06团队工具：如何利用云开发提升团队开发效率？.mp4
[4421]07低代码工具：如何用更少的代码实现更灵活的需求？.!mp4
[4421]07低代码工具：如何用更少的代码实现更灵活的需求？.mp4
[4422]08无代码工具：如何做到不写代码就能高效交付？.mp4
[4423]09构建总览：前端构建工具的演进.mp4
[4424]10流程分解：Webpack的完整构建流程.!mp4
[4424]10流程分解：Webpack的完整构建流程.mp4
[4425]11编译提效：如何为Webpack编译阶段提速？.!mp4
[4425]11编译提效：如何为Webpack编译阶段提速？.mp4
[4426]12打包提效：如何为Webpack打包阶段提速？.!mp4
[4426]12打包提效：如何为Webpack打包阶段提速？.mp4
[4427]13缓存优化：那些基于缓存的优化方案.mp4
[4428]14增量构建：Webpack中的增量构建.!mp4
[4428]14增量构建：Webpack中的增量构建.mp4
[4429]15版本特性：Webpack5中的优化细节.!mp4
[4429]15版本特性：Webpack5中的优化细节.mp4
[4430]16无包构建：盘点那些No-bundle的构建方案.!mp4
[4430]16无包构建：盘点那些No-bundle的构建方案.mp4
[4431]17部署初探：为什么一般不在开发环境下部署代码？.mp4
[4432]18工具盘点：掌握那些流行的代码部署工具.!mp4
[4432]18工具盘点：掌握那些流行的代码部署工具.mp4
[4433]19安装提效：部署流程中的依赖安装效率优化.!mp4
[4433]19安装提效：部署流程中的依赖安装效率优化.mp4
[4434]20流程优化：部署流程中的构建流程策略优化.mp4
[4435]21容器方案：从构建到部署，容器化方案的优势有哪些？.!mp4
[4435]21容器方案：从构建到部署，容器化方案的优势有哪些？.mp4
[4436]22案例分析：搭建基本的前端高效部署系统.!mp4
[4436]22案例分析：搭建基本的前端高效部署系统.mp4
[4437]结束语前端效率工程化的未来展望.!mp4
[4437]结束语前端效率工程化的未来展望.mp4