谈谈前端工程化吧
keywords: 利用工具链解决效率质量问题
前端工程化，利用工具链解决前端在开发过程中提升效率和质量的问题，解决前端工程中的痛点
前端工程中的痛点
keywords: 模块化、兼容性、代码质量、开发效率
- 模块化需求:业界的模块标准非常多,ESM、CommonJS、AMD、CMD,前端工程一方面需要落实这些模块规范。另一方面需要兼容不同的模块规范
- 兼容浏览器，编译高级语法：如 ts，sass等
- 线上代码的质量：打包产物大小，低版本浏览器兼容性
- 开发效率: 项目的冷启动/二次启动时间、热更新时间都可能严重影响开发效率
前端构建工具就是为了解决以上痛点而诞生的
前端构建工具是如何解决前端工程中的痛点的？
模块化
提供模块加载方案，并兼容不同的模块规范。
语法转译方面
配合 Sass、TSC、Babel 等前端工具链，完成高级语法的转译功能
产物质量方面
keywords: 代码压缩与混淆、tree shaking、测试
- 配合
Terser等压缩工具进行代码压缩和混淆 - 通过
Tree Shaking删除未使用的代码，提供对于低版本浏览器的语法降级处理等等 - 通过测试工具和自动化测试流程，帮助检测和预防潜在的问题，确保代码的可靠性
开发效率方面
keywords: 性能优化、CI/CD、代码规范
- 构建工具本身通过各种方式来进行性能优化，比如：
使用原生语言 Go/Rust、no-bundle等提高项目的启动性能和热更新的速度 - 支持CI/CD流程，以确保代码在每次更改后都经过构建、测试和部署。这有助于快速交付功能，减少错误。
- 通过代码规范工具（如ESLint、TSLint）和自动化代码格式化工具（如Prettier），前端工程化可以确保代码风格一致，减少错误和提高可读性。
前端模块化
keywords: 独立、可复用的模块
前端模块化：将前端代码拆分成一个个独立、可复用的模块，方便维护代码
前端模块化发展进程
- CommonJS：模块是同步加载的，在运行时才能确定依赖和输入输出，导出值是拷贝
- AMD：模块异步加载，依赖模块加载完了才会开始执行（缺点：引入未使用的依赖也会加载）在运行时才能确定依赖和输入输出
- CMD：模块异步加载，模块使用时才会加载执行，整合了 CommonJS 和 AMD 的优点，在运行时才能确定依赖和输入输出
- ESM：在编译时就确定模块依赖的输入输出，导出值是引用
