大前端之前端工程化心得

前言

大前端这个概念很早就已经出来了，但是大前端是什么，一直没有一个标准的定义。有的说，大前端就是所有前端的统称，比如Android、iOS、web、Watch等，最接近用户的那一层也就是UI层，将其统一起来，就是大前端。其实我觉得这么说还是少了一点什么，这里表达的更多应该是跨端跨平台的特性。而前端工程化，又是满足跨端跨平台一个非常重要的环节

前端工程化

工程化内容

前端业务日益复杂化和多元化，从最原始的web PC端业务转变成现在的跨端业务，业务一旦复杂，便会出现一系列问题，包括多人协作、代码质量、项目维护、项目风险等等。而前端工程化是使用软件工程的技术和方法来进行前端的开发流程、技术、工具、经验等规范化、标准化，从而提高开发过程中的开发效率，保证前端应用质量。

从 淘系 web 前端架构开发实践 中来看工程化是怎么实现的。

• 规范化：每个人的技术水平、技术栈、代码风格都是不同的，那么统一规范就是必然踏出的第一步。通过脚手架创建项目框架（icejs，基于 React 的渐进式研发框架），统一标准，收敛技术，使开发者开发的代码得到规范，从而确保跨业务，跨团队之间的研发质量和协同效率。

• 开发：

  • 模块化
  • 组件化
  • 脚手架
  • 框架（icejs、ice-scriptes2.x）
  • 研发模式升级，同仓库，同依赖，同命令

• 构建：

  • webpack
  • vite

• 部署：

  • 前后端一起部署

• 性能：

  • 缓存策略
  • 按需加载
  • 首屏渲染速度

性能监控

在性能中一个重要的环节上面没有提到，那就是性能监控，从 如何进行前端性能的观测 中来学习性能监控的实现。

• 可观测性三支柱：指标、日志、链路
• 指标：制定指标（性能、错误信息、操作记录），收集指标，结合图表库，将指标数据可视化展示出来
• 日志：采集应用服务和系统的日志，实现日志的汇聚和分析
• 链路：安全巡检、云拨测

总结

前端工程化可以分为五大部分，开发、构建、部署、性能、规范化，每一个模块都很大，能做的事情很多，把工程化做好，提高工作效率，提升产品质量，让工程化更有意义。以上总结并非很全面，如有不对的地方，敬请指出。

本文参与了 SegmentFault D-Day 征文，欢迎正在阅读的你也加入。