FEBOOK

Appearance

Return to top
On this page

结束语-未来展望

感谢大家可以阅读到这里，感谢每一位花时间阅读本小册的你，感谢你们的陪伴，鞠躬.png。

小册到这里就接近尾声了，我们先来用一个脑图来回顾下本小册的内容：

在小册的结尾，我们也一起回顾一下 2021 年前端工程化发展的现状和展望一下 2022 的发展趋势。

框架

在框架发展方面，在 2021 的 Best of JS 数据显示，React、Vue 仍然位列第一和第二，出人意料的是 Svelte 一举超过 Angular 占据了排名第三的位置。

我们来回顾下 2021 年这三大框架有哪些重大事件：

React 18

React 在 2021 年下半年完成了 18 版本的 Alpha、Beta 版本的发布。其中，主要有三大新特性：开箱即用的改进（如 automatic batching )，Concurrent API 以及内置支持了 React.lazy 的 全新 SSR 架构。

Automatic batching (批处理）

React 18 通过默认执行更多的 batching 来改善性能问题，batching 指的是会将回调函数中多个 setState 事件合并为一次渲染，在使用的时候，只需要将 ReactDom.render 替换为 ReactDom.createRoot 就可以使用该特性。

Concurrent API :

简单来说，Concurrent Mode 就是一种可中断渲染的设计架构。什么时候中断渲染呢？当一个更高优先级渲染到来时，通过放弃当前的渲染，立即执行更高优先级的渲染，换来视觉上更快的响应速度。

其中主要的几个 API 如下

  • startTransition：被 startTransiton 包裹的 setState 触发的渲染被标记为不紧急渲染，可能会被优先级更高的渲染抢占。
  • useTranstion：允许组件在切换到下一个界面之前等到内容加载，从而避免不必要的加载过程。
  • useDeferredValue：让你可以延迟渲染页面中不重要的部分

Concurrent 特性是可选的，可以逐步使用。 你也可以在应用的一小部分开始使用这些功能，而不需要在整个应用程序中都使用。

新的 Suspense SSR 架构 React 18 提供了全新 SSR 架构 ， 在传统的 SSR 架构中，每一步都依赖上一步的结果，其中某一步出现问题就会影响性能问题。React 18 使用 Suspense 可以从以下两方面解决：

  • 流式渲染：使用全新的 pipeToNodeWritable API 搭建从 server 端到 client 的流式渲染通道，能够尽早的发送 HTML，而不是等到整体都 Ready 之后再使用 renderToString 一次性输出。
  • 选择性 hydration：可以在 HTML 和 JS 完全下载之前，尽早开始进行 hydration。能够加快应用加载并缩短交互时间。

这些功能之所以能够实现，要归功于 React 18 新加入的可选的 “并发渲染（concurrent rendering）” 机制。这使得 React 可以同时准备多个版本的 UI。这个机制主要发生在幕后，但它为 React 解锁了非常多新的可能性，来帮助你提高你应用程序的实际与感知性能。

React 18 采用渐进式更新，其中的并发性是可选功能，所以并不会立刻对组件行为带来任何明显的破坏性变化。你几乎不需要对应用程序中的代码进行任何改动就可以直接升级到 React 18，并不会比以往的 React 版本升级要困难。

Vue 3

Vue 团队官方在 2022 年 1 月 20 日宣布：“Vue 3 在 2 月 7 日作为新的默认版本”，这样标志着 Vue3 已经进入稳定版本。

image.png Vue 3 的新特性想必大家都已经了解的差不多了。这里简单说下：

在性能上，Vue3 整体比 Vue2 快了 2倍，主要是因为重写了 virtual DOM，SSR 提速、update 性能的提高和运行时编译。

Vue3 核心的 API 都支持了 Tree-shaking，这些 API 通过包引入的方式而不是直接在实例化时注入，只会对使用到的功能或特性进行打包（按需打包），这意味着更多的功能和更小的体积。

Vue3 一大亮点就是 Composition API，使用纯函数分隔复用代码，和 React 中的 hooks 的概念很相似，能够更好的复用和组织代码，还有更好的类型推导。

新增 Fragment、Teleport、Suspense 三个组件。Fragment 可以创建无意义的包裹组件、Teleport 可以将子节点渲染到存在于父组件以外的 DOM 节点，Suspense 让你的组件在渲染之前进行“等待”，并在等待时显示 fallback 的内容。

同时 Vue 团队也在其他前端开发设施中有所创新的突破，比如大火的 Vite 以及 Vitest 测试工具，日后还有什么新产品我们也可以有所期待。

Svelte

我们在 2021 state of JS 中，可以看到从满意度、关注度、使用度和认知度 4 个层面上都可以看到 Svelte 呈现逐步上升的趋势。

Svelte 的核心思想是通过静态编译减少框架运行时的代码量。开发者的喜爱主要源于 Svelte 有简洁的语法并且学习成本低、上手快、体积小，压缩后体积只有 1.6KB，在开发小型项目上具有优势。不使用 virtual DOM，也就没有了相应的 diff/patch，在某些情况下性能更优。

但是其也因为目前企业级的大型项目的支持程度还缺乏实践，没有一个标杆型项目，所以其在大型项目中的性能优势还没有得到实践证明。但是各大公司在新业务、小型项目场景下的尝试还是不少的。并且其生态也在逐步完善中，距离 React 和 Vue 还是有一定差距的。

同时，SvelteKit 也在 2021 年迎来了 beta 版本，SvelteKit 可以看做是 Svelte 的 Next。是一个使用 Svelte 构建应用程序的框架，包括服务器端渲染、路由、JS 和 CSS 代码拆分、不同无服务器平台的适配器等等，并且其在最新版本中用 Vite 替代 Snowpack（这里也可以看出 Vite 的火爆程度）。

在未来，Svelte 仍有很多值得期待的地方，让我们拭目以待吧，推荐没有用过的同学可以尝试一下~~

构建工具

在构建工具中，对原生 ES 模块的接纳仍在继续，Vite 势头难挡。同时，出于对性能的考虑，越来越多的前端工具开始用其他语言 (Rust、Go) 来构建。 比如 SWC、esbuild。Rust Is The Future of JavaScript Infrastucture，JS 因为其性能问题一直饱受诟病。前端的基础设施比如构建工具却是对性能要求十分高。Rust 自创建以来就以它的安全性、性能、现代化的语法吸引了大批的开发者。

从上面满意度我们可以看到，esm 和 esbuild 将会是未来的趋势。虽然目前使用量上来说 webpack 无疑还是排在第一位的，但是 esbuild 在速度上表现的实在是太优秀（如下图所示的数据，使用 webpack5 需要 41s 的时间，使用 esbuild 只需要 0.3s），可以对其小小的期待一下~

Vite 完美的继承了 esmbuild 的 “快”，其关注度和满意度反馈都很不错。（关于 Vite 的介绍在前面的章节中已经有比较详细的介绍了，这里就不再赘述了）。

SWC 是一个用 Rust 写的高性能 TypeScript / JavaScript 转译器，类似于 babel。对比 babel，官方宣称，SWC 在单线程上比 Babel 快 20倍，在四核上快 70 倍。但是对比 babel 的 plugin 体系，SWC 的生态还有待增强，
Comparison with babel。

移动端和桌面端

跨端开发在现在已经是一个持续已久的话题了，产品也一年又一年的推陈出新，基本上所有的互联网大厂都参与其中，比如 Cordov、Ionic、React Native、Flutter 等等 但至今为止仍然没有一个完美的解决方案。

近年来，各大跨端框架都纷纷推出了其桌面端，比如 React Native Desktop、Flutter Desktop，可见未来几年桌面端也是前端发展的一大趋势。

在桌面端领域，虽然目前 Electorn 的使用度还在首位，但是其缺点也很明显：性能问题 和 包尺寸太大。2021 新推出的 Tauri 就很好的解决了这个问题因此饱受关注，潜力不容小觑。Tauri 在打包大小和内容占用上都有很大的提升，原始 Tauri 应用程序的打包大小小于 3 MB，比 Electron 的大小小140 MB。内存占用小于使用相同代码库构建的 Electron 应用程序的大小的一半。

展望 2022 技术趋势

  • 在框架层面上，React 和 Vue 仍然会稳步前进，重点还是围绕着用户体验和开发者体验两块。而后来者居上的 Svelte 能发展到什么程度我们拭目以待。
  • 在构建工具层面上，esm 和 esbuild 将会是未来的趋势，不知道其能否撼动 webpack 的地位。同时，出于性能方面的考虑，使用 Rust、Go 等其他语言也将是前端构建工具的发展趋势。
  • 各大厂都在积极探索低代码平台和搭建工具，但是仍未有一个巨无霸的产品出现。这也是互联网行业走向工业化和智能化的必经途径。
  • 各大厂对桌面端的关注程度不断上升，纷纷推出其桌面端，前端在桌面端的发展也是一大趋势。
  • 随着互联网和项目的发展，巨石项目会越来越多，项目拆分必然也是一大趋势，微前端也会有更多成熟的方案落地。

总结

前端工程化是一个很大的领域，会涉及到我们平时开发的方方面面。正式因为其内容繁多，其中的每一部分深入研究都可以再另外开一个小册。所以本小册也是带大家“初探”前端工程化，主要带大家从开发、构建、部署三个大方面介绍我们如何使用工程化的手段给前端开发提效。希望你通过本小册，可以对前端工程化有一个系统的认识，可以将本小册的内容应用到平时的开发中。 如果大家对其中的某一部分特别感兴趣可以留言告诉我~~

同时希望我们平时在开发过程中不要只关注于业务代码、只关注于怎么使用 API。API 有千千万，是背不完的，我们只有将原理搞清楚了才可以事半功倍。

读完了本小册希望大家能够在前端工程化上有所收获，抛砖引玉，希望大家可以在前端工程化方面有自己的建树甚至引领前端发展(づ｡◕‿‿◕｡)づ！