Open yanyue404 opened 1 year ago
前端工程化，其实是软件工程在前端方面的应用。什么是软件工程？百度百科的定义：
软件工程是一门研究用工程化方法构建和维护有效的、使用的和高质量的软件的学科。
换句话说，工程化的目的就是为了提升团队的开发效率。例如大家所熟悉的构建打包、性能优化、自动化部署等知识，都属于工程化的内容。
// 核心项目必须使用成熟稳定、可靠的技术栈，边缘小项目可以使用新技术给团队成员练手或者踩坑 if ("是否可控") { if ("是否核心项目") { if ("根据适用性选择技术栈" && "根据易用性选择技术栈") { return "选择的技术栈"; } } else { return "新旧技术栈随意"; } }
模块化
模块化是在文件层面上，对代码或资源的拆分，确保各个模块作用域项目隔离，互不干扰。一个模块就是一个功能，他们可以被多次复用。（分治的思想）
如：JS 的模块化、css 的模块化、资源的模块化等。
组件化
组件化是在设计层面上，对 UI（用户界面）的拆分，组件化更重要是一种分治思想，封装组件需要注意组件之间的依赖关系（继承、扩展、嵌套）
页面成为一个容器，组件时这个容器的基本元素。组件与组件之间可以自由切换、多次复用，丢该页面只需修改对应的组件即可，大大提升了开发效率。
最理想的情况就是一个页面元素全局由组件购惭，这样前端只需要写一些交互逻辑代码。虽然这种情况很难完全实现，但是我们要尽量往这个方向上去做，争取实现全面组件化。
构建工具指能自动对代码执行检验、转换、压缩、打包等功能的工具。
如：webpack、rollup、vite 等。
雪碧图、持续集成、自动化构建、自动化部署、自动化测试（任何简单机械的重复劳动都应该让机器去完成）
chrome 52+ 版本可使用 Lighthouse 工具进行性能检查
修改代码，让代码变得更加容易理解、易于修改、维护、稳定等。
项目越来越大，可以考虑是否对其进行拆分。如使用微服务、 git submodule 和 monorepo 等方式管理项目。
单元测试，E2E 测试。
公共方法库和组件库做单元测试，同时保证一定的测试覆盖率。
为提升团队开发效率，定义开发模式，提炼公共组件，创造实用工具；
工程化概念
前端工程化，其实是软件工程在前端方面的应用。什么是软件工程？百度百科的定义：
换句话说，工程化的目的就是为了提升团队的开发效率。例如大家所熟悉的构建打包、性能优化、自动化部署等知识，都属于工程化的内容。
1. 技术选型：如何进行技术选型？
2. 统一规范
3. 模块化、组件化
模块化
模块化是在文件层面上，对代码或资源的拆分，确保各个模块作用域项目隔离，互不干扰。一个模块就是一个功能，他们可以被多次复用。（分治的思想）
如：JS 的模块化、css 的模块化、资源的模块化等。
组件化
组件化是在设计层面上，对 UI（用户界面）的拆分，组件化更重要是一种分治思想，封装组件需要注意组件之间的依赖关系（继承、扩展、嵌套）
页面成为一个容器，组件时这个容器的基本元素。组件与组件之间可以自由切换、多次复用，丢该页面只需修改对应的组件即可，大大提升了开发效率。
最理想的情况就是一个页面元素全局由组件购惭，这样前端只需要写一些交互逻辑代码。虽然这种情况很难完全实现，但是我们要尽量往这个方向上去做，争取实现全面组件化。
4. 构建工具
构建工具指能自动对代码执行检验、转换、压缩、打包等功能的工具。
如：webpack、rollup、vite 等。
5. 自动化
雪碧图、持续集成、自动化构建、自动化部署、自动化测试（任何简单机械的重复劳动都应该让机器去完成）
6. 性能优化
7. 监控
8. 重构
修改代码，让代码变得更加容易理解、易于修改、维护、稳定等。
9.项目拆分
项目越来越大，可以考虑是否对其进行拆分。如使用微服务、 git submodule 和 monorepo 等方式管理项目。
10. 测试
单元测试，E2E 测试。
公共方法库和组件库做单元测试，同时保证一定的测试覆盖率。
11. 创造性
为提升团队开发效率，定义开发模式，提炼公共组件，创造实用工具；
参考