文章源于我在公司内部的培训和分享，与其说是一篇文章，不如说更像是一个大纲。喜欢的话可以关注 我的 Github 主页，如有疑问欢迎在文章下方评论或在 Github 原文处提交 Issue

一. 什么是前端工程化？

概念

前端工程化，是随着近几年前端项目变得越来越复杂，才提出的一个概念，这个概念在软件工程领域里面，其实并不新鲜。

从我个人角度理解，前端工程化是前端开发的一种思维方式，是针对前端开发过程中所遇到的一系列问题的解决方案，如：组件化、软件质量、可维护性、团队协作、开发效率、测试效率、构建效率、自动化等。

我建议大家用上帝视角来看待「前端工程化」这个概念，以俯视的角度来观察整个前端团队运作的方方面面，然后大家会发现有一个核心贯穿始终，那就是：效率。

所以，前端工程化就可以简化理解为 前端效率提升。

何为效率？

效率分为两种： 人的效率（时间纬度） 和 代码的效率（质量纬度）

• 人的效率：开发效率、构建效率、自动化水平
• 代码的效率：运行效率、维护效率、测试效率

接下来会围绕 效率 展开前端工程化的各个方面。

二. 为什么需要前端工程化？

综上所述，一句话总结👇

前端工程化是为了解决前端项目开发过程中的各种效率问题

三. 前端工程化需要具备什么样的能力?

由于涉及到的知识点众多，以下内容仅做抛砖引玉，所涉及到的各个方面可以根据个人需求自行查阅资料，这里不做展开。

从人的效率出发：时间纬度

人的效率主要受 开发效率、构建效率 和 自动化水平 的影响。

1. 开发效率

技术选型

比如前端框架的选择，如 React, Vue, Angular, Ember, Svelte 等，就可以按照如下思路考虑：

• 团队成熟度，如问题解决的速度和能力
• 软件成熟度
• 社区活跃度
• 软件扩展性
• 软件文档友好程度
• 软件更新速度
• 一些坑的预判（避免过于新的技术采用？可以用于试验，但是不要用于大型项目，难以迭代更新）
• 相关人才储备

以此类推，其他库或软件的选择，均可按照相同方法来判断。

代码规范

• 代码编写规范
• Git提交规范
• 代码审核规范

脚手架

• 善于评估、学习和使用各类脚手架，有助于节约构建新项目的大量时间，如：create-react-app, vue-cli, taro, ewa 等

云开发、低代码和无代码开发

降本增效的利器。

• 云开发：如小程序云开发、Leancloud等服务，可以降低对后端开发的依赖，提高前端开发效率
• 低代码和无代码： 如百度的 amis 低代码框架 和 node-red 无代码可视化编程工具

调试效率

• 了解前端的各类 debug 方式
• 使用 sourceMap 等工具，来查看源代码
• 使用如 Eslint 等代码检查工具

2. 构建效率

构建工具

• 老牌: Grunt, Gulp
• 热门: Webpack, Rollup
• 新的: Snowpack, Vite

构建效率

• 上述构建工具的相关配置、热更新、构建速度优化、插件定制等，重点关注热门和新的两类构建工具。

3. 自动化水平

• 前端自动化: Jenkins，Gitlab, Travis-CI, Github Actions
• 部署效率优化 和 部署流程优化

从代码的效率出发：质量纬度

代码的效率主要受 运行效率、维护效率 和 测试效率 的影响

1. 运行效率

• 性能优化: JS/CSS 执行性能，内存耗用
• 资源加载速度优化(压缩大小，Gzip，CDN，延迟加载，按需加载等)
• 浏览器渲染优化

2. 维护效率

• 代码规范
• 文档
• 组件化
• 分层、抽象、解耦
• 代码版本管理

3. 测试效率

• 接口数据 Mock
• 单元测试、功能测试、自动化测试

最后2条不成熟的小建议

1. MDN 是个好东西，没事多翻翻 传送门 👉
2. 多思考，多动手，不盲从（我说的，也不一定是对的！）

🔗 原文地址