https://zhuanlan.zhihu.com/p/276458191

定义

前端工程化是制定一系列规范，用来提升开发效率、提高开发质量、降低开发难度、减少企业成本、提高用户体验。

内容

  1. 开发
  2. 规范
  3. 构建
  4. 部署
  5. 测试
  6. 性能
  7. 监控

    开发

  • 技术选型：这个方面主要看github的start数量与社区的活跃度，还有团队的学习成本
  • 脚手架搭建：需要根据团队业务封装一个初始模板
  • 组件库：团队定制化，也可使用基础组件抽象成业务组件库
  • libs库：根据团队抽离出的第三方包，包括：工具函数，babel插件等提效工具
  • mock：本地mock与远程mock都可以，主要减少联调成本

  • 微前端：使多个子系统在一个项目中进行隔离操作，减少重构成本

    规范

  • 目录结构：根据框架而定

  • 编码：eslint、prettier、stylelint
  • 技术栈：PC端React、M端Vue
  • 接口：RESTful api
  • commit message: commit-cli
  • git分支管理：git-branch-check + husky
  • code Review: 同业务线同学审查
  • UI：统一组件库
  • 文档：readme格式统一
  • 开发流程：开发工具+习惯+技巧

  • 部署流程：发布流统一 如：测试 => 灰度 => 正式

    构建

  • 预打包：webapck 的 dll 与 externals

  • 合并压缩: 减少文件体积与http连接
  • 代码分割：加快首屏渲染
  • 本地构建缓存：利用babel-loader的cache功能加快本地热更新速度
  • source-map：源码定位问题
  • 按需引入：esm的静态分析，配合tree-shaking
  • 打包速度： 多个子进程打包
  • 打包体积：定位优化目标

  • babel插件：利用babel能力自动生成重复代码

    部署

  • sh脚本：利用scp能力推送到测试服务器

  • odin：手动部署

  • nginx：反向代理，跨域

    测试

  • 单测：jest

  • 网站性能测试：lighthouse

  • e2e自动化测试：cypress puppeteer

    性能

  • CDN:根据最近节点分发文件

  • 按需加载：组件懒加载
  • 本地缓存：协商缓存与强制缓存
  • 同步异步加载：修改script标签属性，控制加载方式
  • 合并请求：减少tcp连接次数
  • 预加载：对将要请求的文件预先加载

  • http2：多路服用，服务端推送等功能

    监控

  • 埋点：pv、uv的统计，特定事件统计

  • 指标：fmp，tti，fid等
  • 异常：错误处理日志

    总结

    以上内容可根据现有的项目逐步进行实践，可搭建服务数据中心来进行数据统计，定期进行复盘。