对前端工程化的理解

[yanyue404]

工程化概念

前端工程化，其实是软件工程在前端方面的应用。什么是软件工程？百度百科的定义：

软件工程是一门研究用工程化方法构建和维护有效的、使用的和高质量的软件的学科。

换句话说，工程化的目的就是为了提升团队的开发效率。例如大家所熟悉的构建打包、性能优化、自动化部署等知识，都属于工程化的内容。

1. 技术选型：如何进行技术选型？

// 核心项目必须使用成熟稳定、可靠的技术栈，边缘小项目可以使用新技术给团队成员练手或者踩坑
if ("是否可控") {
  if ("是否核心项目") {
    if ("根据适用性选择技术栈" && "根据易用性选择技术栈") {
      return "选择的技术栈";
    }
  } else {
    return "新旧技术栈随意";
  }
}

2. 统一规范

• 技术栈规范
• 代码规范
• 前后端接口规范
• 文档规范
• 项目规范
• git 规范
• 组件规范
• UI 规范
• 面试规范

3. 模块化、组件化

模块化

模块化是在文件层面上，对代码或资源的拆分，确保各个模块作用域项目隔离，互不干扰。一个模块就是一个功能，他们可以被多次复用。（分治的思想）

如：JS 的模块化、css 的模块化、资源的模块化等。

组件化

组件化是在设计层面上，对 UI（用户界面）的拆分，组件化更重要是一种分治思想，封装组件需要注意组件之间的依赖关系（继承、扩展、嵌套）

页面成为一个容器，组件时这个容器的基本元素。组件与组件之间可以自由切换、多次复用，丢该页面只需修改对应的组件即可，大大提升了开发效率。

最理想的情况就是一个页面元素全局由组件购惭，这样前端只需要写一些交互逻辑代码。虽然这种情况很难完全实现，但是我们要尽量往这个方向上去做，争取实现全面组件化。

4. 构建工具

构建工具指能自动对代码执行检验、转换、压缩、打包等功能的工具。

如：webpack、rollup、vite 等。

5. 自动化

雪碧图、持续集成、自动化构建、自动化部署、自动化测试（任何简单机械的重复劳动都应该让机器去完成）

6. 性能优化

chrome 52+ 版本可使用 Lighthouse 工具进行性能检查

1. 减少 http 请求
2. 使用 http2
3. 使用服务端渲染（SSR/SSG）
4. 静态资源使用 CDN
5. 将 CSS 放在文件头部，JavaScript 文件放在底部
6. 使用字体图标 iconfont 代替图片图标/使用雪碧图
7. 善用缓存，不重复加载相同的资源
8. 压缩文件
9. 图片优化
10. 按需加载，提取自身或第三方

7. 监控

• 行为数据采集
• 性能数据采集
• 错误数据采集

8. 重构

修改代码，让代码变得更加容易理解、易于修改、维护、稳定等。

9.项目拆分

项目越来越大，可以考虑是否对其进行拆分。如使用微服务、 git submodule 和 monorepo 等方式管理项目。

10. 测试

单元测试，E2E 测试。

公共方法库和组件库做单元测试，同时保证一定的测试覆盖率。

11. 创造性

为提升团队开发效率，定义开发模式，提炼公共组件，创造实用工具；

• 低代码
• 优质组件
• CLI 脚手架
• 小工具
• 油猴脚本
• Chrome 插件

参考

• https://woai3c.gitee.io/introduction-to-front-end-engineering/