文章源于我在公司内部的培训和分享,与其说是一篇文章,不如说更像是一个大纲。喜欢的话可以关注 我的 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. 多思考,多动手,不盲从(我说的,也不一定是对的!)

🔗 原文地址