全栈大前端

# 前端程化大纲

我们知道一个前端项目的研发流程大概是这样几个阶段

  • 开发->调试->构建->测试->部署->监控->统计->分析->维护

那么前端工程化就是让这个链路更加的标准、健壮、易用、可维护、可扩展的一系列措施

作者细化了一下穿插在整个研发流程中各个阶段的工具如下

  • 开发

    • WebIDE
    • 规范化工具：
      • Eslint
      • StyleLint
      • Prettier
      • Lint-staged
    • Git-flow
    • CLI

  • 调试

    • VSCode Debug
    • Chrome Console
    • React DevTools
    • React Profiler

  • 构建

    • 任务化构建
      • Grunt
      • Gulp
      • Parcel
      • Rollup
    • 系统化构建
      • Webpack
    • 基于ESModules构建
      • Vite
      • SnowPack
    • 编译
      • Babel
      • SWC
      • Esbuild

  • 测试

    • E2E测试
      • Mocha, Ava, Karma, Jest, Jasmine
    • UI测试
      • ReactTestUtils, Test Render, Enzyme, React-Testing-Library, Vue-Test-Utils
    • 单元测试
      • Nightwatch, Cypress, Phantomjs, Puppeteer

  • 部署

    • 灰度发布
    • Docker+K8s
    • Nginx
      • 负载均衡
      • 反向代理

  • 监控

    • 工具：Sentry/FunDebug/Webfunny
      • 性能监控
      • 错误监控
      • 行为监控
      • 网络链路

  • 统计

    • Google Analytics
    • 国内：友盟/百度

  • 分析

    • APM平台

  • 维护

    • 性能优化
    • 安全防护

# 模块化

  • CommonJS
  • AMD
  • CDM
  • UMD
  • ES6

# 包管理

  • Npm

  • CNpm

  • Yarn

  • Pnpm

  • MonoRepo Lerna

# 构建工具与编译

# 任务化构建方式

  • grunt

2012 年 Grunt 发布首版[6]¹²，将处理过程定义为多个不同的任务，每个任务执行一个函数或插件；

  • gulp（文件流）

2013 年 Gulp 发布首版[7]，并快速在同年发布到了 3.0 正式版，在 Grunt 抽象任务的基础上，Gulp 引入了流编程的概念，避免在执行复杂任务时，需要将编译中间结果放在临时文件夹的场景；

  • parcel

2013 年⁴，Parcel[12] 发布首版，并在 2018 年发布 1.0 正式版，在当时它主打无配置启动项目； Parcel 首版发布于 2013 年，但是它大规模进入公共视野是在 2017 年。

  • rollup

2015 年，Rollup[13] 发布首版，并在 2019 年发布 1.0 正式版，它主打工具库的打包，相比 Webpack 配置更简单和轻量；

# 系统化构建方式

  • WebPack（模块依赖）

2012 年 Webpack[8] 发布首版，并于 2014 年发布 1.0 正式版，它通过分析模块间依赖来决定编译过程，将可扩展点抽象为 loader 和 plugin。

2020 年，Webpack 5.0 发布，实现了多进程编译以优化计算密集型任务，并强化了缓存机制；

Webpack 最终能统治社区，离不开它的三个王牌能力：一切皆可打包、本地模块热加载（HMR）和按需加载。而 Webpack 的弱项是其配置的繁琐和复杂，在这个阶段出现的大部分新包，也是在牺牲了部分能力的前提下，去强化封装性和简化复杂度：

# Bundleless（性能优化）

  • SnowPack

2020 年，Snowpack[14] 发布首版正式版，主打不打包项目依赖的模块（Bundleless），而是直接依赖 CDN 提供的模块文件，大大提升了本地环境运行速度；

  • Vite

2020 年，Vite[15] 发布首版，同样主打 Bundleless。

# 代码编译

  • Babel

2014 年，Babel[11] 发布首版³，重心放在对 JavaScript 转译，使得尚在提案阶段的语言特性能兼容。

  • SWC

2019 年，基于 Rust 实现的 SWC[21] 发布首版，对标 Babel，显著提升了性能；

  • Esbuild

2020 年，使用 go 实现的 esbuild[22] 发布首版，相比 SWC 更聚焦于 TypeScript 和 JavaScript 的转译，性能更快；

  1. 它基于 golang，就是比 node.js 快。
  2. 高度并行的处理算法。
  3. 节制的功能设计。
  4. 重写核心工具链。

# 组件化

  • WebComponent

  • UI组件库

    • Antd
    • ElementUI

# 标准化

  • 脚手架

  • 监控

    • sentry ：从监控错误、错误统计图表、多重标签过滤和标签统计到触发告警，这一整套都很完善，团队项目需要充钱，而且数据量越大钱越贵
    • fundebug：除了监控错误，还可以录屏，也就是记录错误发生的前几秒用户的所有操作，压缩后的体积只有几十 KB，但操作略微繁琐
    • webfunny：也是含有监控错误的功能，可以支持千万级别日PV量，额外的亮点是可以远程调试、性能分析，也可以docker私有化部署（免费）,业务代码加密过

  • 安全

# 自动化

  • CI/CD

  • 自动化测试

# 规范化

  • Eslint

  • StyleLint

  • Prettier

  • Lint-staged

# 全栈化（前后端一体化）

  • 同构渲染 SSR

  • BFF Sever

  • GraphQL

  • SeverLess

# 其他

  • 微前端
  • 跨端融合
  • 智能化
  • 平台化
  • 低码化

← 脚手架-CLI →