关于javascript:前端工程化漫谈

文章源于我在公司外部的培训和分享，喜爱的话能够关注 我的 Github 主页，如有疑难欢送在文章下方评论或在 Github 原文处提交 Issue

一. 什么是前端工程化？

概念

前端工程化，是随着近几年前端我的项目变得越来越简单，才提出的一个概念，这个概念在软件工程畛域外面，其实并不陈腐。

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

我倡议大家用上帝视角来对待「前端工程化」这个概念，以仰视的角度来察看整个前端团队运作的方方面面，而后大家会发现有一个外围贯通始终，那就是：效率。

所以，前端工程化就能够简化了解为 前端效率晋升。

何为效率？

效率分为两种：人的效率（工夫纬度） 和 代码的效率（品质纬度）

• 人的效率：开发效率、构建效率、自动化程度
• 代码的效率：运行效率、保护效率、测试效率

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

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

综上所述，一句话总结????

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

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

因为波及到的知识点泛滥，以下内容仅做抛砖引玉，所波及到的各个方面能够依据集体需要自行查阅材料，这里不做开展。

从人的效率登程：工夫纬度

人的效率次要受 开发效率 、 构建效率 和 自动化程度 的影响。

1. 开发效率

技术选型

比方 Web 框架的抉择: 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. 多思考，多入手，不盲从（我说的，也不肯定是对的！）

???? 原文地址