大家好，我是程序員魚皮。從夯到拉，鋭評 39 個前端技術，一口氣説完！
之前我做了後端技術的從夯到拉排名，很多同學留言説想看前端版。説實話，剛開始我是拒絕的，因為前端技術實在是太多了、而且更新速度非常快，之前有個學弟還跟我吐槽什麼前端娛樂圈之類的，咱也不懂好吧。
但是！既然大家想看，那我就來一期。而且這期我還會評選出唯一的 前端技術之王（frontend king），大家可以先猜一猜，會是哪個？我敢説不超過 1% 的同學能猜對。
正式開始前先鄭重聲明，由於每個前端技術都有自己的應用場景，很多時候沒辦法完全公平地去比較，所以接下來的排行會帶有一定的主觀性。本期魚皮只是希望幫大家學到知識、認識更多的技術。
大家可以在評論區打出自己的評價，看看跟我想的是否一樣。
-
視頻版 - 前端排行：https://bilibili.com/video/BV11yigBfEkL
-
視頻版 - 後端排行：https://bilibili.com/video/BV1HiqQBgEoN
評價維度
接下來我將從 5 個維度來評價這些前端技術：
-
實用性：能解決多少實際問題、是否為項目必備
-
生態成熟度：包括社區活躍度、文檔完善度、第三方庫豐富度
-
學習成本：上手難度和學習曲線
-
開發效率：開發速度和體驗
-
穩定性：版本迭代是否破壞兼容性、出現安全漏洞的頻率
作為開發者，我個人最看重的是 實用性和生態成熟度。
實用性就不多説了，畢竟技術是用來解決問題或者找工作賺米的。
生態好不僅意味着遇到問題能快速找到解決方案，更重要的是，因為訓練數據多、社區案例豐富，AI 生成的代碼質量會更高。
所以再次聲明，下面的排名並不代表技術本身的優劣，會具有一定的主觀性。
前端技術從夯到拉排行榜
先説説跟樣式相關的前端技術。
1、Sass【人上人】
CSS 預處理器，讓你用編程的方式寫樣式。寫過原生 CSS 的都知道，一堆重複的顏色值、一層套一層的選擇器，維護起來非常頭疼。Sass 支持變量、嵌套、混合、繼承等高級特性，可以解決這些問題。
Sass 的優點是功能強大、社區成熟，缺點是需要編譯，而且現在 CSS 原生也支持變量和嵌套了。考慮到它仍然是很多大型項目的標配，給到 人上人。
2、Bootstrap【拉】
Twitter 開源的 UI 框架，提供現成的樣式和組件，讓你不用從零寫 CSS。曾經是前端開發的標配，一套柵格系統打天下.
但是 2025 年了，還在用 Bootstrap 的項目基本都是遺留系統。組件樣式過時、定製困難、體積臃腫，React、Vue 當道，誰還用這種全局樣式污染的方案？給到 拉。
3、Tailwind CSS【夯】
原子化 CSS 框架的代表，快速寫樣式的神器。它的理念是：不寫 CSS 文件，直接在 HTML 裏用 class 拼樣式。比如 flex justify-center items-center，一行搞定居中。
有朋友剛開始可能會覺得這玩意兒醜，class 名字一大串，覺得不就是把 CSS 寫到 HTML 裏了嗎？但是用習慣後真香，能明顯提升開發效率；再配合組件化開發，完全不用擔心樣式衝突。
還有一個加分項，現在很多 AI 工具生成的前端代碼，默認都用 Tailwind！像很多朋友好奇為什麼 AI 生成的很多界面是藍紫色？因為 AI 訓練時吃了太多使用 Tailwind UI 的網站，而 Tailwind UI 的默認配色就是藍紫色。
考慮到它對開發效率的巨大提升和 AI 生成界面的巨大貢獻，給到 夯！
4、Element Plus【人上人】
Vue 框架的主流 UI 組件庫，由餓了麼團隊開發。如果你用 Vue 做中後台系統，那 Element 基本是標配。
優點是組件豐富、文檔清晰、國內社區活躍。
缺點是樣式偏傳統，不太適合 C 端項目，而且有些組件不夠靈活。但考慮到國內 Vue 生態的主流地位，Element 是很多前端新人的啓蒙組件庫，給到 人上人。
5、Ant Design【人上人】
螞蟻金服出品的企業級 UI 組件庫，在開發 B 端中後台管理系統方面一手遮天。它不僅組件質量高、設計規範完善，而且生態非常豐富，推出了 Ant Design Pro 腳手架、ProComponents 高級組件、AntV 數據可視化方案，以及最近很火的 Ant Design X AI 組件庫。而且同時有 React 和 Vue 版本，我個人非常喜歡用它。
但缺點也很明顯，體積大、樣式定製麻煩，沒有那麼適合 C 端系統。考慮到國內 B 端的統治地位，給到 人上人。
6、LayUI【NPC】
老牌輕量級 UI 框架，情懷之作。採用原生 JavaScript，不依賴 Vue/React。適合那些不想學現代前端框架、只想快速搭個後台的同學，我大學剛開始學前端的時候就在用。
但是它在組件化時代顯得格格不入，整體生態和社區活躍度比不上主流方案，AI 生成代碼也不會選擇這個 UI 吧，只能給到 NPC。
7、Shadcn/UI【人上人】
可能是 2025 年最火的 UI 方案。注意，它不是一個組件庫，而是一套 可複製粘貼的代碼集合。不需要使用 npm 來安裝依賴，而是直接把組件代碼複製到你的項目裏。
好處是極度靈活，代碼在你手裏，想怎麼改就怎麼改；缺點是需要自己維護組件代碼，版本升級比較麻煩。給到 人上人。
接下來聊聊構建工具。
8、Webpack【NPC】
前端工程化的奠基者，模塊打包的開山鼻祖。
構建工具的作用是把你寫的代碼打包、壓縮、轉換成瀏覽器能運行的文件。很多年前做前端，Webpack 配置是必修課，什麼 loader、plugin、code splitting，面試必問。
雖然它生態成熟、功能強大。但問題是配置文件動輒幾百行，你如果學會了 Webpack 配置，就能去應聘配置工程師了。而且熱更新慢到懷疑人生，改個代碼等半天才生效。開發體驗被 Vite 降維打擊，正在逐漸被時代淘汰，只能給到 NPC。
9、Vite【夯】
新一代構建工具，Webpack 終結者。它用原生 ES Module 實現毫秒級熱更新，冷啓動速度吊打 Webpack。配置簡單、開箱即用，開發體驗好到飛起。而且支持各種主流前端框架，已經成為現代前端項目的標配，必須給到 夯！
10、Grunt/Gulp【拉】
上古時代的任務運行器，比 Webpack 還老的構建方案。通過配置任務來處理文件壓縮、代碼編譯、合併等操作。
但是現代構建工具早就內置了這些功能，還在用這倆的項目，估計都是幾代員工的祖傳代碼了，給到 拉中拉！
接下來聊聊包管理工具。
11、npm【頂級】
前端包管理的祖師爺，幫你安裝和管理項目依賴的工具。由於安裝 Node.js 就自帶 npm，所以 npm 生態特別成熟，幾乎所有的 JS 包都會發布到 npm。
但缺點是安裝速度慢、node_modules 文件夾動輒幾個 G（宇宙中最重的物體）、還有幽靈依賴問題。不過考慮到它是前端開發的核心工具，生態無可替代，給到 頂級。
12、pnpm【夯】
性能更高的 npm，目前最高效的包管理工具。它用硬鏈接和符號鏈接的方式共享依賴，一個包只存一份，多個項目共用，從而節省空間、安裝更快。因此越來越多的項目都在遷移到 pnpm，給到 夯！
13、Yarn【NPC】
為了解決 npm 的速度和一致性問題而生，曾經風流一時的包管理工具。像 lock 文件、離線緩存、並行安裝，這些概念都是 Yarn 先提出來的。
但是 npm 後來也跟進了這些特性，而 pnpm 在性能上又超越了 Yarn。所以導致現在的 Yarn 處於一個非常尷尬的位置，給到 NPC。
14、Bower【拉】
上古時代的前端包管理器，老前輩了。但自從 npm 支持前端包管理、Webpack 統一了模塊化方案之後，Bower 就徹底退出歷史舞台了。官方都宣佈不再維護，給到 拉！
接下來聊聊前端工程化相關的技術。
15、TypeScript【夯】
全體起立！
TypeScript 是 JavaScript 的超集，前端大項目的救世主。以前寫 JS，變量類型全靠猜，運行時才知道哪裏報錯。TypeScript 給 JS 加上了類型系統，通過類型安全、IDE 智能提示、編譯時檢查，解決了 JS 的類型混亂問題。大型項目沒有 TypeScript 簡直寸步難行。
2025 年 8 月，TypeScript 超越 Python 和 JavaScript，成為 GitHub 上最廣泛使用的語言！現在連 AI 生成代碼都優先生成 TS。
要説不足之處，就是有一定的學習成本，什麼 “類型體操” 對於前端新人來説還是挺頭疼的吧，一不留神就變成 AnyScript。作為現代前端的標配，必須給到 夯！
16、Prettier【人上人】
代碼格式化工具，團隊協作神器。它能自動把你的代碼按統一規則格式化，保存時自動整理縮進、換行、引號等。不管你喜歡單引號還是雙引號，Prettier 説了算，同一個項目的代碼就是要整整齊齊。但考慮到不是剛需，給到 人上人。
17、ESLint【頂級】
代碼規範檢查工具，團隊協作必備。它能幫你發現潛在的 Bug、統一代碼風格、強制使用最佳實踐。比如什麼未使用的變量、可能的空指針、不規範的寫法，ESLint 都能幫你揪出來。
現代前端項目幾乎都會配置 ESLint，配合 TypeScript 和 Prettier 使用，能大大提升代碼質量，給到 頂級。
18、Turborepo【頂級】
現代前端大廠的 Monorepo（巨型倉庫）管理神器。
Monorepo 就是把多個項目放在一個代碼倉庫裏統一管理。比如你有官網、管理後台、移動端 App，傳統做法是建 3 個倉庫，但 Monorepo 就把它們放在一起，共享代碼、統一構建。
Turborepo（還有 Nx）能幫你管理這種複雜的項目結構，提供增量構建、智能緩存、任務編排等功能。改了一個包，只重新構建受影響的部分，構建速度甚至可以提升幾十倍。
注意，Monorepo 不是必要的，更多的是大廠在採用，給到 頂級。
19、qiankun【頂級】
螞蟻金服開源的微前端框架的扛把子。
微前端就是把一個大型前端應用拆分成多個獨立的小應用，每個小應用可以獨立開發、獨立部署、獨立運行，最後由一個主應用把它們整合在一起。
qiankun 提供了應用加載、沙箱隔離、應用通信等核心能力，可以讓不同技術棧的項目共存，比如主應用用 React，子應用可以用 Vue、Angular，互不干擾。
適用於大型企業應用、多團隊協作和遺留系統改造。缺點是架構複雜度高，調試麻煩，而且性能開銷比單體應用大，不是所有項目都需要微前端，給到 頂級。
下面重點來了，我們來聊聊前端開發框架。
20、Angular【NPC】
Google 出品的企業級前端框架，大而全的重量級選手。路由、表單、HTTP、狀態管理通通內置，開箱即用。原生支持 TypeScript，採用依賴注入、模塊化設計，寫起來很有 Java 的 Spring 那味兒。
缺點是概念太多、學習成本高、項目啓動慢。學 Angular 的時間，都夠學完 Vue 和 React 了。
雖然 Angular 的全球市場還行，但在國內的存在感越來越弱了，基本只有外企在用。給到 NPC。
21、jQuery【拉】
前端活化石，DOM 操作的老祖宗。每當我看到 $('.class').click() 這種寫法，都忍不住落下兩滴晶瑩剔透的小淚珠，滿滿的回憶殺。
如今隨着 React、Vue 這些組件化框架的崛起，以及瀏覽器原生 API 的完善，jQuery 的優勢蕩然無存，已經被幹成時代的眼淚了。現在除了維護老項目外，基本上沒有理由用 jQuery 了。給到 拉！
22、Svelte【NPC】
編譯型前端框架，性能怪獸。它在編譯時把組件轉成原生 JavaScript，運行時沒有框架開銷，包體積小、速度快。
我在 20 年用 Svelte 寫過一些 Demo，開發體驗還是挺不錯的，響應式變量的聲明很簡潔。但是生態比 React 和 Vue 差了不少，尤其是國內用的更少，想快點兒找前端工作就先別學它了。暫時給到 NPC。
23、Vue 3【夯】
接下來終於到了大家期待的 Vue 了，國內最受歡迎的前端框架。它採用 漸進式設計，你可以只用它做頁面的一小部分，也可以用它搭建完整的單頁應用，非常靈活。它的單文件組件和模板語法簡單直觀；而且生態完善，像 Vite、Pinia、VueUse 這些配套工具支持都很好，官方文檔寫的也清晰易懂，上手難度比 React 低不少。
在國內找前端工作，不會 Vue 等於少了一半機會，考慮到面向薪資編程，給到 夯！
24、React【頂級】
如果説 Vue 是國內老大，那 React 就是全球前端霸主。像組件化思想、虛擬 DOM、單向數據流這些概念都是 React 帶火的。
雖然學習難度略大一些（JSX 語法），但我個人更喜歡 React，我們團隊的產品也基本都是基於 React 開發。一方面 React 的 Hooks 用起來很爽；另一方面，跟 Vue 比起來，React 全球範圍的生態更強。
按理説應該給到 “夯”，但是最近 React 服務端組件曝出了一個嚴重的遠程代碼執行漏洞，我們團隊好幾個項目都中招了，服務器淪為礦機、讓我們被迫加班。
考慮到這種全棧化帶來的安全風險，我這次只能把 React 降到 頂級，不是説 React 不行啊，純個人情緒好吧。
25、Next.js【頂級】
目前最火的 React 全棧框架，支持服務端渲染（SSR）、靜態站點生成（SSG）、API 路由等功能，讓前端也能寫後端接口。
和它類似的還有 Nuxt.js，這是 Vue 生態的 SSR 首選，國內用的很多。如果你要做 SEO 友好的網站，或者想用前端技術棧搞定整個項目，優先選這兩者，給到 頂級。
接下來聊聊前端開發的一些工具和庫。
26、VitePress【NPC】
Vue 官方出品的文檔站生成器，VuePress 的繼任者。如果你要搭建技術文檔網站，用 Markdown 來寫文檔，那麼 VitePress 的體驗很好，主題定製也靈活。Vue 3 和 Vite 的官方文檔都在用它。
但使用場景比較窄，主要就是做文檔網站，實用性相對有限，給到 NPC。
27、Astro【頂級】
最近增長最快的靜態站點生成器，它的核心理念是羣島架構：頁面默認是靜態 HTML，只有需要交互的部分才加載 JS，所以頁面加載飛快。
而且 Astro 很靈活，可以同時使用 React、Vue、Svelte 組件，不挑框架。如果你要做博客、文檔站、營銷頁這些內容型網站，Astro 非常合適，像我們團隊的剪切助手官網就是用 Astro 生成的。給到 頂級。
28、Pinia【人上人】
Vue 3 官方推薦的狀態管理庫，用來管理組件間共享的數據。相比 Vuex，Pinia 的語法更簡潔，TypeScript 支持更好，沒有那些 mutations、actions 的繁瑣概念，用起來更舒服。
現在 Vue 3 項目標配都是 Pinia，Vuex 基本退休了。給到 人上人。
29、Axios【夯】
HTTP 請求庫的標配，前後端數據交互必備工具。雖然瀏覽器有原生的 fetch，但 Axios 的 API 設計更友好，而且支持自動轉換 JSON、請求攔截、響應攔截這些功能都幫你封裝好了，用起來很方便。
優點是國內外項目都在用，生態成熟，文檔完善。缺點是包體積略大，但 5G 時代無傷大雅，再加上請求庫本身的重要性，給到 夯！
30、ky【NPC】
輕量級 HTTP 請求庫（不是罵人的那個 ky）。基於 Fetch API 封裝，體積只有 2KB！如果你追求極致的包體積，ky 是個不錯的選擇。
但知名度和使用率遠不如 Axios，國內用的更少，生態也差一些。給到 NPC。
31、Lodash【NPC】
JS 工具函數庫的老大哥，類似 Java 的 Hutool，幫你封裝了像數組操作、對象處理、函數節流防抖等等的常用功能，拿來就用。
聽起來很強大對吧？
但問題是，Lodash 沉寂了整整 5 年，直到最近才更新了一個小版本。而且現在 ES6+ 已經原生支持了很多功能，像 Array.find、Object.assign、展開運算符等，新項目越來越少主動引入 Lodash 了。屬於 “還在用但可以不用，並且不推薦新項目用” 的狀態，給到 NPC。
接下來聊聊跨端開發框架。
32、Uni-app【頂級】
基於 Vue 的跨端框架，國內小程序開發的神器。它最大的優勢是一套代碼可以發佈到各個平台，像微信小程序、H5、App 全都支持，省了大量重複開發的工作。
優點是應用廣泛；缺點是性能不如原生開發，不過這也是跨端開發框架的通病了。給到 頂級！
33、Taro【人上人】
京東開源的跨端解決方案，React 技術棧的小程序開發首選。跟 Uni-app 類似，也是一套代碼多端運行。
如果你的團隊習慣 React，就選 Taro；習慣 Vue，就選 Uni-app。相比 Uni-app，Taro 的市場佔有率稍低一些，所以給到 人上人。
34、React Native【人上人】
跨平台移動開發的主流選擇，跟 Flutter 並稱跨平台雙雄。用 React 語法寫原生 App，一套代碼 iOS、Android 都能跑。而且支持熱更新，調試很方便，生態也很成熟。
缺點是性能不如純原生開發，某些複雜動畫需要寫原生代碼。給到 人上人。
35、Electron【人上人】
跨平台桌面應用框架。如果你會前端，用 Electron 就能開發桌面應用，一套代碼 Windows、Mac、Linux 上都能跑。VS Code、QQ、還有我們的剪切助手軟件都是用 Electron 寫的。
優點是開發效率高，直接複用前端技術棧，能快速把網頁變成桌面應用。缺點是內存佔用大、包體積大，一個簡單應用動輒上百 M。考慮到它的成熟度，雖然有 Tauri 這些新框架，還是給到 人上人。
最後再聊一些有點兒特殊的前端技術。
36、Three.js【人上人】
Web 3D 領域的絕對王者，高薪的敲門磚。讓你用 JavaScript 在瀏覽器裏渲染 3D 場景，像元宇宙、數字孿生、可視化大屏這些高大上的項目，基本都離不開 Three.js。
缺點是學習難度很大，需要一定的圖形學知識。不過現在有 AI 了，可以直接讓 AI 幫你生成複雜的 3D 場景代碼，學習成本大大降低。給到 人上人。
37、WebAssembly【頂級】
Web 性能的天花板，處理重型計算的幕後英雄。
WebAssembly 是一種可以在瀏覽器裏運行的二進制指令格式，性能接近原生代碼。你可以用 C/C++、Rust 等語言寫高性能模塊，編譯成 Wasm，然後在瀏覽器裏跑。它最大的優勢就是 快，像視頻剪輯、圖像處理、3D 渲染、遊戲引擎這些計算密集型任務，用 Wasm 能提升幾十倍性能。
缺點是開發門檻高，而且調試比較麻煩。但隨着工具鏈的完善和 AI 生成代碼能力的增強，Wasm 的應用場景會越來越廣，給到 頂級。
38、CoffeeScript【拉】
等等，這不是 Java 麼？
這是曾經風流一秒的 JavaScript 替代方案，它的理念是用更簡潔優雅的語法寫代碼，然後編譯成 JavaScript。但 ES6 出來之後，JS 自己支持了箭頭函數、類、模板字符串這些特性，CoffeeScript 瞬間沒了存在價值，被 TypeScript 完全取代，給到 拉！
39、Vibe Coding【夯爆了】
最後的最後，揭曉我們的前端技術之王、唯一真夯 —— Vibe Coding！
你猜對了麼？
什麼是 Vibe Coding？就是用 AI 輔助編程，你描述需求説人話，AI 幫你寫代碼。
它不是某個特定的框架或庫，而是一種全新的編程範式。它改變的不是某個技術環節，而是整個開發流程。這是近年來前端開發最革命性的變化，沒有之一。
雖然 Vibe Coding 不算是前端技術，但是我就問一句：現在哪個前端不用 AI 來寫代碼？！
像我現在寫代碼基本離不開 Cursor 了，開發效率提升 10 倍以上不是吹的。必須 夯爆了！
最終排行榜
最後
OK 就分享到這裏，如果你們還想看哪些技術的排名，或者你覺得哪個技術的排名不合理，都可以在評論區告訴我哦。我是魚皮，關注我，帶你解鎖更多編程和 AI 知識~
