🖼️ 1. UI组件库（UI Component Libraries）

快速构建美观、响应式、可访问的用户界面

1. React —— Facebook 出品的 UI 构建库https://react.dev

2. Vue.js —— 渐进式 JavaScript 框架https://vuejs.org

3. Svelte —— 编译时框架，无虚拟 DOMhttps://svelte.dev

4. Solid.js —— React-like 语法，极致性能https://www.solidjs.com

5. Qwik —— 可恢复性框架，超快首屏加载https://qwik.builder.io

6. Lit —— 轻量级 Web Components 库（Google）https://lit.dev

7. Alpine.js —— 轻量级“Tailwind for JS”https://alpinejs.dev

8. Preact —— React 的轻量替代（3kB）https://preactjs.com

9. Mithril.js —— 超小、超快、全功能框架https://mithril.js.org

10. Stimulus —— Basecamp 出品，HTML 驱动交互https://stimulus.hotwired.dev

🧠 2. 状态管理（State Management）

管理复杂应用的数据流与状态同步

1. Redux —— 可预测状态容器https://redux.js.org

2. Zustand —— 轻量、简单、无模板的状态管理https://zustand-demo.pmnd.rs

3. Jotai —— 原子化状态管理（React 专用）https://jotai.org

4. Recoil —— Facebook 实验性原子状态库https://recoiljs.org

5. MobX —— 响应式状态管理https://mobx.js.org

6. Valtio —— 代理驱动的简单状态管理https://valtio.pmnd.rs

7. XState —— 状态机与状态图管理https://xstate.js.org

8. Effector —— 事件驱动状态管理https://effector.dev

9. Signals —— Preact 官方状态响应系统https://preactjs.com/guide/v10/signals/

10. Hookstate —— 基于 Hook 的全局状态管理https://hookstate.js.org

📊 3. 数据可视化（Data Visualization）

将数据转化为图表、地图、仪表盘

1. D3.js —— 数据驱动文档的底层可视化库https://d3js.org

2. Chart.js —— 简单易用的 HTML5 图表库https://www.chartjs.org

3. ECharts —— 百度出品，企业级图表库https://echarts.apache.org

4. ApexCharts —— 现代、交互式 SVG 图表https://apexcharts.com

5. Victory —— React 专用图表库https://formidable.com/open-source/victory

6. Recharts —— 基于 React + D3 的组合式图表https://recharts.org

7. Nivo —— 精美、响应式数据可视化组件https://nivo.rocks

8. Visx —— Airbnb 出品，D3 的 React 友好封装https://airbnb.io/visx

9. Plotly.js —— 科学计算与交互式图表https://plotly.com/javascript

10. Frappe Charts —— GitHub 风格的轻量图表https://frappe.io/charts

🎞️ 4. 动画库（Animation Libraries）

让界面动起来，提升用户体验

1. GSAP —— 专业级动画引擎https://greensock.com/gsap

2. Framer Motion —— React 专属动画库https://www.framer.com/motion

3. Anime.js —— 轻量级 JavaScript 动画引擎https://animejs.com

4. Motion One —— 高性能 Web 动画库https://motion.dev

5. Popmotion —— 灵活的动画与手势库https://popmotion.io

6. Mo.js —— 专为网页动效设计的库https://mojs.github.io

7. Vivus —— SVG 路径动画绘制https://maxwellito.github.io/vivus

8. ScrollReveal —— 滚动触发动画https://scrollrevealjs.org

9. AOS (Animate On Scroll) —— 简单滚动动画https://michalsnik.github.io/aos

10. Tippy.js —— 工具提示动画库（带过渡）https://atomiks.github.io/tippyjs

🧰 5. 工具函数库（Utility Libraries）

日常开发高频使用的工具函数集合

1. Lodash —— JavaScript 实用工具库https://lodash.com

2. Ramda —— 函数式编程工具库https://ramdajs.com

3. date-fns —— 现代日期处理库https://date-fns.org

4. Day.js —— 轻量级 Moment.js 替代https://day.js.org

5. Zod —— TypeScript 优先的 schema 校验https://zod.dev

6. Yup —— 表单校验 schema 库https://github.com/jquense/yup

7. Nano ID —— 短、安全、URL 友好 ID 生成器https://github.com/ai/nanoid

8. clsx —— 条件化 className 工具https://github.com/lukeed/clsx

9. SWR —— React 数据请求与缓存https://swr.vercel.app

10. React Query —— 强大的数据同步与状态管理https://tanstack.com/query

📝 6. 表单处理（Form Handling）

构建复杂、校验严格、高性能表单

1. React Hook Form —— 高性能 React 表单https://react-hook-form.com

2. Formik —— React 表单状态管理https://formik.org

3. Final Form —— 高性能、可扩展表单库https://final-form.org

4. VeeValidate —— Vue 专用表单校验https://vee-validate.logaretm.com

5. Zod + React Hook Form —— TypeScript 校验组合拳https://react-hook-form.com/ts + https://zod.dev

6. Yup + Formik —— 经典校验组合https://formik.org/docs/guides/validation

7. Uniforms —— Schema 驱动表单生成器https://uniforms.tools

8. React JSON Schema Form —— JSON Schema → 表单https://rjsf-team.github.io/react-jsonschema-form

9. SurveyJS —— 动态问卷/调查表单https://surveyjs.io

10. Formily —— 阿里出品企业级表单解决方案https://formilyjs.org

✅ 7. 测试工具（Testing Tools）

保障代码质量，实现自动化测试

1. Jest —— Facebook 出品的全能测试框架https://jestjs.io

2. Vitest —— Vite 生态的极速测试工具https://vitest.dev

3. Cypress —— 端到端测试神器https://www.cypress.io

4. Playwright —— 微软出品，跨浏览器自动化测试https://playwright.dev

5. Testing Library —— React/Vue/Angular 专用测试工具https://testing-library.com

6. Mocha —— 灵活、可扩展的测试框架https://mochajs.org

7. Chai —— BDD/TDD 断言库（常配 Mocha）https://www.chaijs.com

8. Sinon.js —— 间谍、存根、模拟函数https://sinonjs.org

9. MSW (Mock Service Worker) —— API 模拟神器https://mswjs.io

10. Puppeteer —— Headless Chrome Node.js APIhttps://pptr.dev

🛠️ 8. 构建与打包（Build & Bundlers）

优化、压缩、打包你的前端资源

1. Vite —— 下一代前端构建工具https://vitejs.dev

2. Webpack —— 老牌模块打包器https://webpack.js.org

3. Rollup —— 库打包首选https://rollupjs.org

4. Parcel —— 零配置打包工具https://parceljs.org

5. esbuild —— 极速 JS 打包/压缩工具https://esbuild.github.io

6. SWC (Speedy Web Compiler) —— Rust 编写的转译器https://swc.rs

7. Turbopack —— Webpack 作者新作（Next.js 默认）https://turbo.build/pack

8. Snowpack —— O(1) 构建速度的打包器https://www.snowpack.dev（已归档，但仍有参考价值）

9. Rspack —— 字节跳动出品，类 Webpack API，Rust 驱动https://www.rspack.dev

10. Farm —— 新一代 Rust 构建工具（挑战 Vite）https://farmfe.org

📱 9. 移动端开发（Mobile Development）

构建跨平台或高性能移动 Web 应用

1. React Native —— 使用 React 构建原生 Apphttps://reactnative.dev

2. Ionic —— 基于 Web 技术的跨平台框架https://ionicframework.com

3. Capacitor —— Web 应用 → 原生 App（Ionic 出品）https://capacitorjs.com

4. NativeScript —— 直接调用原生 APIhttps://nativescript.org

5. Quasar Framework —— 一套代码构建 Web/移动/桌面/Electronhttps://quasar.dev

6. Framework7 —— 专为 iOS/Android 设计的 UI 框架https://framework7.io

7. Onsen UI —— 与 Vue/React/Angular 集成的移动端 UIhttps://onsen.io

8. Flutter Web —— Dart 编写，编译到 Web（Google）https://flutter.dev/web

9. H5 Plus (DCloud) —— 国内流行 HTML5+ 原生能力扩展https://www.dcloud.io/h5p.html

10. Taro —— 一套代码多端运行（React 语法）https://taro.zone

💻 10. 桌面端开发（Desktop Apps）

使用 Web 技术构建跨平台桌面应用

1. Electron —— GitHub 出品，最流行桌面框架https://www.electronjs.org

2. Tauri —— Rust + WebView，轻量级替代 Electronhttps://tauri.app

3. Neutralinojs —— 超轻量桌面应用框架https://neutralino.js.org

4. NW.js —— Node + WebKit 桌面应用框架https://nwjs.io

5. Proton Native —— React 语法写原生桌面应用https://proton-native.js.org（社区维护中）

6. DeskGap —— 轻量级 Node + WebView 框架https://deskgap.com

7. NodeGui —— 使用 Qt 绑定构建原生 UIhttps://nodegui.org

8. Flutter Desktop —— 一套代码构建多端（含桌面）https://docs.flutter.dev/desktop

9. Beeware (Toga) —— Python 编写跨平台 GUIhttps://beeware.org

10. Wails —— Go + Web 前端构建桌面应用https://wails.io

🕶️ 11. 3D与游戏（3D & Game Development）

在浏览器中创建 3D 场景和游戏

1. Three.js —— 最流行的 WebGL 3D 库https://threejs.org

2. Babylon.js —— 微软出品，功能完整的游戏引擎https://www.babylonjs.com

3. PlayCanvas —— 云端协作的 3D 引擎https://playcanvas.com

4. Cannon.js —— 3D 物理引擎（配 Three.js）https://schteppe.github.io/cannon.js

5. Ammo.js —— Bullet Physics 的 JS 移植版https://github.com/kripken/ammo.js

6. PixiJS —— 2D WebGL 渲染引擎（游戏/动画）https://pixijs.com

7. Phaser —— HTML5 游戏框架https://phaser.io

8. Zdog —— 伪 3D 扁平化渲染引擎https://zzz.dog

9. Troika 3D Text —— Three.js 3D 文字渲染https://protectwise.github.io/troika

10. Drei —— Three.js 的 React 组件封装库https://github.com/pmndrs/drei

🗺️ 12. 地图与GIS（Maps & GIS）

在应用中集成地图、定位、地理信息

1. Leaflet —— 轻量级开源地图库https://leafletjs.com

2. Mapbox GL JS —— 高性能矢量地图渲染https://docs.mapbox.com/mapbox-gl-js

3. OpenLayers —— 企业级地图解决方案https://openlayers.org

4. Google Maps Platform JS API —— 谷歌官方地图https://developers.google.com/maps/documentation/javascript

5. ArcGIS API for JavaScript —— Esri 企业 GIS 平台https://developers.arcgis.com/javascript

6. Deck.gl —— Uber 出品，大数据可视化地图层https://deck.gl

7. CesiumJS —— 3D 地球与地图引擎https://cesium.com/platform/cesiumjs

8. React-Leaflet —— React 封装的 Leaflethttps://react-leaflet.js.org

9. Vue2Leaflet / Vue3Leaflet —— Vue 封装 Leaflethttps://vue2-leaflet.netlify.app

10. MapLibre GL JS —— Mapbox GL 的开源分支https://maplibre.org

🎧 13. 音视频处理（Audio & Video）

处理、播放、录制音视频内容

1. Howler.js —— Web Audio API 封装，游戏音效首选https://howlerjs.com

2. WaveSurfer.js —— 音频波形可视化https://wavesurfer.xyz

3. Video.js —— 通用 HTML5 视频播放器https://videojs.com

4. hls.js —— 在浏览器中播放 HLS 流https://github.com/video-dev/hls.js

5. MediaRecorder API 封装库 —— 如 RecordRTChttps://recordrtc.org

6. Tone.js —— Web 音乐创作框架https://tonejs.github.io

7. Plyr —— 简洁美观的 HTML5 媒体播放器https://plyr.io

8. Shaka Player —— Google 出品，支持 DASH/DRMhttps://shaka-player-demo.appspot.com

9. Web Audio API 原生 + 库 —— 如 WAAPI + Tuna.js（音频效果器）https://github.com/Theodeus/tuna

10. Mux.js —— 视频转封装/转码工具库（B站等使用）https://github.com/videojs/mux.js

🌍 14. 国际化与本地化（i18n & L10n）

支持多语言、多地区、多文化

1. i18next —— 功能完整、插件丰富https://www.i18next.com

2. react-i18next —— React 专用 i18next 封装https://react.i18next.com

3. Vue I18n —— Vue 官方国际化插件https://vue-i18n.intlify.dev

4. FormatJS (react-intl) —— Yahoo 出品，支持 ICUhttps://formatjs.io

5. Polyglot.js —— Airbnb 轻量级方案https://airbnb.io/polyglot.js

6. LinguiJS —— 开发者友好的 React 国际化https://lingui.dev

7. Fluent.js —— Mozilla 出品，语法强大https://projectfluent.org

8. Rosetta —— 超轻量（1kB）国际化库https://github.com/lukeed/rosetta

9. Svelte-i18n —— Svelte 专用国际化https://github.com/sveltekit/i18n

10. next-intl —— Next.js 专用国际化方案https://next-intl-docs.vercel.app

⚡ 15. 性能优化与监控（Performance & Monitoring）

提升加载速度、运行效率、错误追踪

1. Lighthouse —— Google 官方性能审计工具https://developer.chrome.com/docs/lighthouse

2. Web Vitals —— 核心用户体验指标库https://web.dev/vitals

3. Sentry —— 错误监控与性能追踪https://sentry.io

4. LogRocket —— 录屏 + 日志 + 性能分析https://logrocket.com

5. BundlePhobia —— 查看 npm 包体积影响https://bundlephobia.com

6. Import Cost —— VS Code 插件，实时显示导入包大小https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost

7. React DevTools Profiler —— React 性能分析器https://react.dev/learn/devtools-profiling

8. Why Did You Render —— 监控 React 不必要重渲染https://github.com/welldone-software/why-did-you-render

9. Perfume.js —— 轻量级 Web 性能监控https://zizzamia.github.io/perfume

10. SpeedCurve / Calibre / Treo —— 企业级性能监控平台（商业）https://speedcurve.com | https://calibreapp.com