文章源于我在公司内部的培训和分享,与其说是一篇文章,不如说更像是一个大纲。喜欢的话可以关注 我的 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条不成熟的小建议
- MDN 是个好东西,没事多翻翻 传送门 👉
- 多思考,多动手,不盲从(我说的,也不一定是对的!)
🔗 原文地址
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。