前端技術棧涵蓋廣泛，涉及多個領域和技術方向。以下是全面的分類總結，幫助你對前端技術生態有系統化的了解：

---

一、核心基礎

1. HTML/CSS

   • HTML5（語義化標簽、Web Components）
   • CSS3（Flexbox/Grid、動畫、變量、BEM/SMACSS方法論）
   • 預處理器：Sass/Less/Stylus
   • 后處理器：PostCSS（Autoprefixer等）

2. JavaScript

   • ES6+（模塊化、Promise、Async/Await、Proxy等）
   • TypeScript（類型系統、裝飾器）
   • 調試工具：Chrome DevTools、Source Map

---

二、前端框架與庫

1. 主流框架

   • React（Hooks、Context、Redux/Recoil）
   • Vue（Composition API、Pinia、Vuex）
   • Angular（RxJS、依賴注入、NgModule）
   • Svelte（編譯時優化）

2. UI組件庫

   • 通用：Ant Design、Material UI、Element UI
   • 移動端：Vant（Vue）、Ant Design Mobile
   • 輕量級：Headless UI（無樣式組件）

3. CSS-in-JS

   • Styled-components、Emotion、Tailwind CSS（實用優先）

---

三、構建工具與工程化

1. 打包工具

   • Webpack（Loader/Plugin、Tree Shaking）
   • Vite（基于ESM的快速構建）
   • Rollup（庫打包優化）
   • Parcel（零配置）

2. 開發工具

   • Babel（轉譯、Polyfill）
   • ESLint/Prettier（代碼規范）
   • Husky/Lint-Staged（Git鉤子）

3. 模塊化

   • ESM（瀏覽器原生模塊）
   • CommonJS/UMD（歷史遺留）

---

四、狀態管理

1. 全局狀態

   • Redux（RTK簡化版）、MobX、Zustand
   • Vue生態：Pinia（替代Vuex）
   • Context API（React原生方案）

2. 數據請求

   • Fetch API、Axios
   • GraphQL（Apollo Client、Relay）
   • SWR/React Query（數據緩存）

---

五、路由與導航

1. SPA路由
   • React Router、Vue Router
   • Next.js/Nuxt.js內置路由
   • 靜態路由：Remix（嵌套路由）

---

六、測試相關

1. 單元測試

   • Jest（快照測試）
   • Vitest（兼容Vite）

2. E2E測試

   • Cypress、Playwright、Puppeteer

3. 組件測試

   • React Testing Library、Storybook（UI隔離開發）

---

七、跨平臺與混合開發

1. 桌面端

   • Electron（VSCode同款）
   • Tauri（Rust輕量替代）

2. 移動端

   • React Native、Weex（Vue生態）
   • Flutter（Dart語言，跨端UI）

3. 小程序

   • Taro（多端統一）、Uni-app

---

八、性能優化

1. 加載優化

   • 代碼分割（Dynamic Import）
   • 圖片懶加載（Intersection Observer）
   • CDN/PWA（離線緩存）

2. 渲染優化

   • Virtual DOM差異算法（React Fiber）
   • 防抖/節流、Web Worker

3. 工具分析

   • Lighthouse、WebPageTest
   • Chrome Performance面板

---

九、前沿技術

1. WebAssembly

   • 高性能計算（如FFmpeg.wasm）

2. Web3D/游戲

   • Three.js、Babylon.js
   • WebGL/WebGPU

3. 低代碼/無代碼

   • 平臺：Figma插件、Retool
   • 框架：amis、LowCodeEngine

4. 邊緣計算

   • Cloudflare Workers、Deno Deploy

---

十、其他關鍵工具

1. SSR/SSG

   • Next.js（React）、Nuxt.js（Vue）、Astro（島嶼架構）

2. 微前端

   • qiankun、Module Federation（Webpack 5）

3. 可視化

   • ECharts、D3.js、Chart.js

4. 編輯器

   • Monaco（VSCode核心）、CodeMirror

---

十一、學習路徑建議

1. 入門：HTML/CSS → JavaScript → Vue/React
2. 進階：工程化 → 性能優化 → 框架源碼
3. 拓展：跨端開發 → 全棧能力（Node.js基礎）

---

前端技術迭代迅速，建議關注 Web Components、Serverless、AI集成（如TensorFlow.js）等新興方向。保持持續學習，結合實際項目實踐才能深入掌握。