大家好，我是 Sunday。
最近看后端的同学发了不少【从夯到拉，技术排行榜】，那咱们作为前端开发，怎么能没有自己的排行榜？尤其是在现在 AI 大行其道的时代下。
所以今天， Sunday 就斗胆献丑，整理了一份前端视角的技术排行榜，和大家一起 从夯到拉，聊聊AI 时代下的前端技术
评价维度
我将从 5 个维度来“锐评”这些前端技术：
- AI 亲和度：AI（Copilot/ChatGPT）能不能写得又快又对。
- 开发体验：写起来爽不爽，配置烦不烦。
- 生态护城河：组件库多不多， AI 的语料库够不够大。
- 性能表现：加载速度、运行时性能、包体积。
- 就业“钱”景：国内大厂用不用，面试考不考。
OK ，那么开始～
从夯到拉
1. TypeScript 【夯】
毫无争议的 夯。JavaScript 的“亲爹”，大型项目的标配。以前你觉得写类型麻烦，现在有了 AI，类型定义基本不用自己手敲。
它把 JS 的动态弱类型变成了静态强类型，极大减少了 undefined is not a function 的低级错误。现在去面试，不会 TS 基本等于没穿裤子。前端开发的绝对政治正确。
2. React 【夯】
前端界的 Spring，生态系统的绝对霸主。你可能不喜欢它的 JSX，讨厌它的 useEffect 闭包陷阱，但你无法否认它是目前全球就业市场最广的框架（国内除外）。
AI 对 React 的支持很好，生成的代码可用性很高。只要 Meta 不倒，React 就是前端的硬通货。虽然学习曲线陡峭，但学会了就是 夯。
3. Vue 3 【夯】
国内前端的“国民框架”，国内就业市场最广的框架，没有之一。
尤雨溪大神的杰作，Vue 3 引入组合式 API (Composition API) 后，逻辑复用能力对标 React Hooks，同时性能更强。在国内，无论是大厂还是外包，Vue 的占有率极高。上手简单，文档像小说一样通顺。对于中国开发者来说，这就是 夯 中之夯。
4. Vite 【夯】
构建工具的新王，把 Webpack 按在地上摩擦。基于 ES Modules，启动速度快到让你怀疑人生（正面意义）。
以前改行代码等热更新要 5 秒，现在是毫秒级。它改变了前端开发的节奏，生态极其活跃，现在的脚手架基本都默认 Vite 了。必须给到 夯！
5. NestJS 【夯】
前端开发后端的顶级框架，没有之一。
直接支持依赖注入、装饰器 等模式，面试汪和简历汪 的后端全部都是基于 NestJS 开发的。对于想要在 Node.js 中构建企业级应用或微服务架构的开发者，NestJS 无疑是最佳的选择。
必须 夯！
6. Tailwind CSS 【顶级】
原子化 CSS 的巅峰。以前觉得“把样式写在 HTML 里”是开倒车，用过之后：真香！不用绞尽脑汁想 class 名字，不用在文件间跳来跳去。
特别是配合 AI，你告诉 AI “我要一个蓝色渐变圆角按钮”，它生成的 Tailwind 代码精准完美。开发效率提升 100%，给到 顶级。
7. Next.js 【顶级】
React 的御用服务端渲染（SSR）框架。Vercel 把它做到了极致，SEO 友好，首屏加载快。
虽然最近推出的 Server Components 让人有点晕头转向，API 变动稍微频繁了点，但它依然是构建大型 React 应用的首选。想要进阶全栈？Next.js 是必经之路。
8. Nuxt.js 【顶级】
Vue 的御用服务端渲染（SSR）框架，给 Vue 开发者提供了与 Next.js 相同的体验。
对于需要快速构建 SEO 友好的 Vue 应用的开发者来说，Nuxt.js 无疑是最好的选择。它的生态完善，文档清晰，社区活跃。AI 也在大力支持 Nuxt.js 开发，自动化生成页面和组件的代码，提升了生产力。
咱们训练营开发的面试汪和简历汪，前端部分都是用的 nuxtjs，必须给到 顶级。
9. Uni-app（X） 【顶级】
国内开发者的“省钱神器”。一套代码，同时发布到 iOS、Android、H5、以及各种小程序（微信、支付宝、抖音...）。
虽然坑也不少，有时候为了兼容性要写一堆 if-else，但在国内这种小程序横行的环境下，它是老板最爱，也是接私活利器。实用主义的 顶级 选择。
10. Pinia 【人上人】
Vuex 的继任者，Vue 状态管理的终极形态。去掉了繁琐的 Mutation，只有 State、Getter、Action，不仅代码写得少，对 TypeScript 的支持也堪称完美。如果你还在用 Vuex，赶紧切到 Pinia 吧，真的回不去了。
11. Ant Design / Element Plus 【人上人】
B 端管理后台的“复制粘贴”神器。国内做中后台，90% 都在用这两套。虽然长得千篇一律，被称为“难看”，但组件丰富度无人能敌。对于打工人来说，能快速把需求堆出来准点下班，就是 人上人 的体验。
12. Svelte 【人上人】
编译型框架的代表，没有虚拟 DOM，性能炸裂。代码量比 React 和 Vue 少得多，写起来非常顺滑。虽然在国内生态不如 Vue/React，工作机会相对较少，但每一个用过 Svelte 的人都会成为它的自来水。属于技术极客的 人上人 选择。
13. Zustand 【人上人】
React 状态管理的一股清流。比 Redux 简单一万倍，比 Context API 性能好。体积小巧，API 设计非常 Hooks 化。不需要包裹 Provider，随处可用。在 React 社区越来越受欢迎，正在抢占 Redux 的市场。
14. Electron 【人上人】
用 Web 技术写桌面端应用的老大。VS Code、Discord 都是用它写的。虽然被人诟病“吃内存”、“打包含 Chromium 体积大”，但目前依然是最成熟的跨平台桌面方案。只要你内存够大，它就能带你飞。
15. Three.js 【人上人】
Web 3D 领域的绝对统治者。想在网页上搞 3D 模型、酷炫粒子效果、元宇宙概念？Three.js 是绕不过去的大山。虽然学习门槛高，涉及图形学知识，但一旦掌握，你就是前端里的特种兵，薪资通常也是 人上人。
16. Shadcn/UI 【人上人】
最近火出圈的 UI 方案。它不是一个组件库，而是一份代码集合。你直接把组件代码复制到你项目里（或者用 CLI），然后自己随便改。极度灵活，极度可控，配合 Tailwind CSS，简直是现代前端开发的颜控福音。
17. Angular 【NPC】
Google 出品的企业级框架。大而全，依赖注入、RxJS、TypeScript（它是先驱）。虽然技术很强，但在国内除了部分外企和老牌大厂，存在感越来越弱。学习曲线陡峭，由于过于笨重，在这个追求轻量化和 AI 快速生成的时代，只能给到 NPC。
18. Webpack 【NPC】
曾经的构建霸主，配置工程师的噩梦。功能极其强大，什么都能配，但配置极其复杂。现在新项目基本被 Vite 接管，Webpack 更多存在于老项目的维护中。它依然很重要，但没人想主动去招惹它了，逐渐退化为基础设施的 NPC。
19. Flutter 【NPC】
Google 的跨平台移动端开发框架。性能确实好，Skia 引擎自绘 UI。但是！它用 Dart 语言。作为一个前端，为了写个 App 特意去学个新语言（而且这语言除了写 Flutter 没啥用），成本略高。且在 Web 端支持上依然拉胯，只能算移动端的强者，前端视角的 NPC。
20. jQuery 【拉完了】
前端的活化石。$ 符号是一代人的回忆。在现代 MVVM 框架面前，它的直接操作 DOM 模式已经过时。虽然全世界还有 70% 的网站里藏着它，但如果你现在新项目还引入 jQuery，会被同事打死的。维护老项目时它是个 NPC，新项目里它不存在。
21. Redux (Legacy) 【拉完了】
注意，我说的是老式的 Redux，不是 Redux Toolkit。那个写一个简单的加减法需要创建 Action、Type、Reducer、Store 四个文件，还要写一堆 switch-case 的年代简直是噩梦。 boilerplate 代码多到令人发指。现在还手写原始 Redux 的，拉完了。
22. Internet Explorer (IE) 【拉完了】
万恶之源。微软自己都把它埋了，Edge 都换 Chromium 内核了。如果你入职的公司还强制要求兼容 IE6/7/8，甚至 IE11，听我一句劝：快跑！这不仅是技术 拉完了，更是对你生命的浪费。
23. Bootstrap 【拉完了】
曾经的 CSS 框架王者，响应式布局的启蒙。但现在看，它的样式太具有年代感了，一股浓浓的 2015 年风味。而且需要引入 jQuery 依赖（虽然后期去掉了），覆盖样式还得用 !important 硬刚。现在有 Tailwind 和各种现代化 UI 库，Bootstrap 真的 拉完了。
24. Grunt / Gulp 【拉完了】
上古时代的任务运行器。在 Webpack 出现之前，我们用它压缩图片、编译 Sass。配置全是流式操作，虽然逻辑清晰，但在现在的模块化构建时代，它们已经彻底掉队。如果你还在写 gulpfile.js，说明你的项目年纪可能比你侄子都大。拉完了。
总结
以上内容纯属个人观点，如有不认同的，欢迎在评论区沟通呀～
