工程化
预计阅读时间: 10 分钟引言
工程化是个老生常谈的问题, 那什么是工程化呢? 他的整个流程是什么呢? 基本思路是啥呢?
这才是工程化?
对于前端来说大家现在看到的工程化都是, 我用了 webpack, 然后写了一些不知道干什么的配置, 就完成了工程化
兄弟们, 这个是工程化嘛? 感觉好像不是吧, 只是配置了参数然后就完成了, 配完之后他帮你干了什么呢? 一概不知
这才是工程化!
工程化是将系统化、标准化的方法应用于项目或产品的设计、开发、测试、部署、维护等各个环节. 他强调通过科学的方法和工具来提高效率、保证质量、降低风险.
在软件开发领域, 工程化尤其重要, 因为软件项目的复杂性和规模往往很大, 需要有效的管理才能确保成功. 以下是工程化带来的一些好处:
- 提高效率: 通过引入自动化工具 (如持续集成/持续部署 CI/CD)、代码审查机制等手段, 可以显著加快开发周期, 减少重复劳动
- 增强协作: 定义清晰的工作流程与规范有助于团队成员之间更好地沟通合作, 即便是远程工作也能保持高效协同
- 提升产品质量: 采用严格的测试策略 (包括单元测试、集成测试等) 以及代码质量管理工具可以帮助在其发现并修复问题, 从而提高最终产品的稳定性和可靠性
- 易于维护与扩展: 良好的架构设计和文档记录使得后续对系统的修改或者新增功能变得更加容易, 降低了长期运行的成崩
- 风险管理: 通过整个开发过程进行监控, 并及时调整计划以应对潜在的问题, 可以有效控制项目进度中的不确定因素
- 促进更新: 当基础架构和服务变得足够成熟稳定后, 开发者就能够更加专注于探索新的技术或业务模式, 推动产品不断创新
总之, 是是工程化不仅能够帮助企业构建出更高质量的产品, 还能够在快速变化的技术环境中保持竞争力. 不过值得注意的是, 实现真正的工程化并非一蹴而就的事情, 他需要企业根据自身情况不断摸索适合自己的最佳实践
上面是 AI 给工程化的定义, 那我们用人话来说, 工程化可以将固定的工作流程化, 帮助我们更好的维护项目、提高开发效率、减少重复工作
那回过头来对于前端来说什么是工程化呢?
下面举一个栗子:
前端开发的时候, 我们经常会用一些三方框架, 比如 react, vue, angular 等, 这些框架都是为了简化前端开发而产生的, 但是浏览器并不能解析他们, 所以我们需要手动的编译他们, 编译成浏览器能解析的代码, 那这个流程是固定且重复的吧, 没人想写一个文件就编译一下吧, 所以这时候我们就需要用工程化的方式, 来简化这个流程
我们拿 react 来说
我写一个脚本, 获取所有的 jsx 文件, 然后使用 esbuild 把 jsx 文件编译为浏览器认识的 js 文件, 这样我每次就只需要执行这个脚本就可以批量的将所有的 jsx 文件编译为 js 文件了
这就是工程化的一个小例子
但是什么都需要我们自己处理的化就太复杂且麻烦了, 所以业界给我们提供了很多工程化的解决方案, 例如 webpack, vite, rollup, rsbuild, rspack, rolldown 等, 这些工具可以帮助我们实现前端工程化, 但是我们应该知悉他的流程是什么, 以及应该对不同环境配置哪些内容
工程化的流程
项目打包
下面我们就以 webpack 为例来介绍一个整个打包的流程吧
- 读取配置
- 注册指定文件的加载器和插件 (加载器配置字段:
module.rules, 插件配置字段:plugins) - 读取入口文件 (入口配置字段:
entry) - 分析依赖: 从入口文件开始递归的去分析他依赖的文件, 然后保存文件信息和对应的加载器信息
- 编译: 根据上一步分析的依赖信息和对应的加载器信息进行打包
- 输出资源: 编译完成之后根据第 4 步分析出来的依赖关系, 将所有打包结果组装成一个或多个 bundle 或 chunk
- 文件写入: 在确定好输出内容之后, 根据配置确定该输出路径和文件名, 将文件内容写入到文件系统中
这样就完成了对一个项目的打包了
不同环境需要考虑的问题
在开发环境下, 我们通常应该考虑以下问题:
- 怎么及时看到当前变更的效果: 移除打包阶段对资源的优化例如代码压缩、混淆等
- 怎么更方便的定位到出问题的代码: 不混淆代码, 不添加 hash 配置等
- 怎么更方便的调试代码: 使用 source map 等
- 等
在生产环境下, 我们通常应该考虑一下问题:
- 代码安全: 使用代码混淆, 移除 console 等
- 代码兼容性: 使用 babel, polyfill, autoperfix 等
- 产物体积: 使用代码压缩, 移除 console、注释等, 对于图片字体等其他资源, 可以考虑使用 CDN 或者压缩
- 产物分包: 对于大文件, 制定分包策略, 例如工具包、业务包、三方包、二方包等
- 等
自动化测试
如果我们的项目需要测试, 那么我们可以在任何时间节点使用自动化测试来保证我们的项目质量
比如我们可以在提交代码之前执行单元测试和集成测试, 然后部署之前执行端到端测试
自动化测试通常包括:
- 单元测试
- 集成测试
- 端到端测试
- 等
其他
CI/CD 也是工程化的一个重要部分, 它可以帮助我们实现自动化部署, 避免手动部署带来的风险
总结
前端工程化是一个重要的概念, 它可以帮助我们实现前端开发的高效性和质量, 但是我们不应该盲目的使用现有的工程化方案, 而是应该了解工程化的本质, 然后 focus 到我们自己的业务, 然后针对业务进行项目的工程化配置, 不是说所有工程化方案都是好的, 而是在这个阶段均衡业务和开发需要, 并且具备一定的灵活性才是好的方案