最新前端技术趋势

前端的车轮滚滚向前，轮子造的越来越圆，速度造的越来越快，每个人都在适应这个轮子的节奏，稍微不注意就会被甩出车轮之外。狼狈不堪之外还会发自心底的大喊一声：别卷了！！

话虽这么说，但现实就是这样，无论是客观还是主观因素都不得不让你继续的往前走。既然是往前走，
那么能知道一些前面有啥东西岂不是更好，也许能少走弯路。

自己对前端23年大概的技术做了一些展望，想到什么写什么。毕竟谁都不知道会不会突然间又出了个frontEndGPT打翻了所有人的饭碗。

1 AI

最先说的肯定是AI，22年末，23年初的chatgpt让AI话题火的一塌糊涂，同时也被认为是一次重大的技术革新，技术革新带来的就是重塑，一切都要被重塑，你的职业，你的工作。
视觉层面的stable diffusion和midjourney已经对设计师产生了重大影响，而涉及到视觉ui层面的话，前端肯定是绕不开的部分。虽然目前没有直接的对前端产生影响，但下面的就一个就不只是对前端了，而是对整个程序员都产生了影响。

• copilot

Your AI pair programmer. Trained on billions of lines of code, GitHub Copilot turns natural language prompts into coding suggestions across dozens of languages.

看看醒目的文字就知道，程序员或多或少都会被影响了。

还有什么CodeWhisperer, Cursor等也都是AI辅助编程。

更有Fronty，Locofy等将图片AI分析为HTML文档，无代码快速建站，figma快速解析成代码等，虽然是提效不少，但谁能说这些不是对前端的一种重塑呢。

2 主流框架

随着React，Vue等框架进一步的普及，现在前端想要脱离它们的场景越来越少了。那么它们的下一步规划，也会对我们产生一些不小的影响。

react

react 18以后，react似乎是对create-react-app这种项目启动方式也不怎么主推了，毕竟速度摆在那里，没有任何优势。而使用直接竞争对手的产品似乎又不太合适，而直接说又不用又显得跟开源精神不吻合(当然竞争对手的一些基本特性也确实和现有的构建思想不太吻合)。

他们似乎采取一种围魏救赵的方式，着重宣传next的方式。next不仅仅是一个ssr的框架，同时它也支持csr,ssg等不同的方式(next13开始，对于客户端组件和服务端组件可以有了比较好的区分)。同时next与react有着千丝万缕的联系，而next正在进行一个新的构建工具的替换。
next采用了turbopack,也是Webpack作者TobiasKoppers的作品，官方说它更新速度比Vite也要快10倍、比Webpack快700倍

而react也应该大概率会引入turbopack(当然它如果继续搞前端脚手架的话)。当然也可能会直接使用next环境。

至于快多少，以及评价基准等我们可以看下turbopack真比Vite快10倍吗？

next

next最新版本也加入了很多的特性，比如server component理念，约定式路由的更改，流式渲染，客户端组件与服务端组件分离更简单，更好的构建速度等等功能。可以让开发体验，用户体验更好，性能也会有响应的提升。

vite

这个不用说了，优秀的构建速度以及越来越丰富的社区，让其在22年有了很大提升。随着浏览器的逐步升级，23年vite肯定也会是重大的一年。

webpack

虽然5有了好多的功能提升，不过速度似乎一直是一个绕不过去的坎。就连作者也已经开始搞turbopack了，虽然加入swc能让编译有很大提升，但是目前从我身边的人的了解看，越来越多的人开始转向vite等其它方式了

turbopack

是webpack作者去的新公司开发的一款基于rust的打包工具。官方明确说明就是为了替换webpack。 同时强调webpack是这十年最火的工具，那turbopack就定位成未来几年的工具。由于作者和webpack, Vercel, next, React这些之间千丝万缕的联系，很难不说未来React也许会和这个打包工具绑定上。下面是官方提供的速度参考

而除了turbopack外，同一团队还在做Turborepo。

这是一款项目管理的工具，最主要的面向场景是Monorepo这种复杂的多项目管理

Monorepo有很多优势，但是在多个项目中会有很多复杂的构建过程和相对闭塞的构建步骤，每一次上线都是耗时严重。所以Turborepo是为了解决这个问题出现的，让一些构建重复的构建步骤提炼出来，基于整个Monorepo项目的维度来管理多个子项目。

同时对于单个CI的构建步骤，解决每台机器，每个人都要单独构建的问题，还提炼了类似store的方案，脱离了构建环境，只跟项目绑定，当然这个方案是否使用要看你自己，毕竟原理是把构建产物放到第三方储存，而第三方又不是一个类似npm的开源机构。

3 服务端

node从7，8年前的爆火，到现在的不温不火，前端语言介入服务端这个命题似乎现在是越来越清晰了。那就是定位，可以做网关，可以做转发，可以做一些数据代理合并，定位清晰node依然有自己的使用场景。
node也马上到了20版本，迎来了一些特性

• esm的更好支持，
  

• 测试功能更加丰富
  

• V8 引擎更新至 11.3，与Chromium113版本大部分相同
  

• 支持以虚拟机的方式，动态运行js代码
  

• WebAssembly的支持(实验性的)

于此同时，node曾经的作者Ryan Dahl几年前搞的Deno似乎没有太多的消息，似乎在向商业化方向前进。打造出Deno Deploy及其即时边缘渲染SSR框架Deno Fresh

4 其它

WebAssembly, 元框架，ts，微前端？

引用：

http://www.infoq.cn/article/9qu…
turbo.build/pack/docs/w…
http://www.robinwieruch.de/web-develop…