🖼️ 1. UI组件库(UI Component Libraries)
快速构建美观、响应式、可访问的用户界面
- React ------ Facebook 出品的 UI 构建库
- Vue.js ------ 渐进式 JavaScript 框架
- Svelte ------ 编译时框架,无虚拟 DOM
- Solid.js ------ React-like 语法,极致性能
- Qwik ------ 可恢复性框架,超快首屏加载
- Lit ------ 轻量级 Web Components 库(Google)
- Alpine.js ------ 轻量级"Tailwind for JS"
- Preact ------ React 的轻量替代(3kB)
- Mithril.js ------ 超小、超快、全功能框架
- Stimulus ------ Basecamp 出品,HTML 驱动交互
🧠 2. 状态管理(State Management)
管理复杂应用的数据流与状态同步
- Redux ------ 可预测状态容器
- Zustand ------ 轻量、简单、无模板的状态管理
- Jotai ------ 原子化状态管理(React 专用)
- Recoil ------ Facebook 实验性原子状态库
- MobX ------ 响应式状态管理
- Valtio ------ 代理驱动的简单状态管理
- XState ------ 状态机与状态图管理
- Effector ------ 事件驱动状态管理
- Signals ------ Preact 官方状态响应系统
- Hookstate ------ 基于 Hook 的全局状态管理
📊 3. 数据可视化(Data Visualization)
将数据转化为图表、地图、仪表盘
- D3.js ------ 数据驱动文档的底层可视化库
- Chart.js ------ 简单易用的 HTML5 图表库
- ECharts ------ 百度出品,企业级图表库
- ApexCharts ------ 现代、交互式 SVG 图表
- Victory ------ React 专用图表库
- Recharts ------ 基于 React + D3 的组合式图表
- Nivo ------ 精美、响应式数据可视化组件
- Visx ------ Airbnb 出品,D3 的 React 友好封装
- Plotly.js ------ 科学计算与交互式图表
- Frappe Charts ------ GitHub 风格的轻量图表
🎞️ 4. 动画库(Animation Libraries)
让界面动起来,提升用户体验
- GSAP ------ 专业级动画引擎
- Framer Motion ------ React 专属动画库
- Anime.js ------ 轻量级 JavaScript 动画引擎
- Motion One ------ 高性能 Web 动画库
- Popmotion ------ 灵活的动画与手势库
- Mo.js ------ 专为网页动效设计的库
- Vivus ------ SVG 路径动画绘制
- ScrollReveal ------ 滚动触发动画
- AOS (Animate On Scroll) ------ 简单滚动动画
- Tippy.js ------ 工具提示动画库(带过渡)
🧰 5. 工具函数库(Utility Libraries)
日常开发高频使用的工具函数集合
- Lodash ------ JavaScript 实用工具库
- Ramda ------ 函数式编程工具库
- date-fns ------ 现代日期处理库
- Day.js ------ 轻量级 Moment.js 替代
- Zod ------ TypeScript 优先的 schema 校验
- Yup ------ 表单校验 schema 库
- Nano ID ------ 短、安全、URL 友好 ID 生成器
- clsx ------ 条件化 className 工具
- SWR ------ React 数据请求与缓存
- React Query ------ 强大的数据同步与状态管理
📝 6. 表单处理(Form Handling)
构建复杂、校验严格、高性能表单
- React Hook Form ------ 高性能 React 表单
- Formik ------ React 表单状态管理
- Final Form ------ 高性能、可扩展表单库
- VeeValidate ------ Vue 专用表单校验
- Zod + React Hook Form ------ TypeScript 校验组合拳
react-hook-form.com/ts + https:...
- Yup + Formik ------ 经典校验组合
- Uniforms ------ Schema 驱动表单生成器
- React JSON Schema Form ------ JSON Schema → 表单
rjsf-team.github.io/react-jsons...
- SurveyJS ------ 动态问卷/调查表单
- Formily ------ 阿里出品企业级表单解决方案
✅ 7. 测试工具(Testing Tools)
保障代码质量,实现自动化测试
- Jest ------ Facebook 出品的全能测试框架
- Vitest ------ Vite 生态的极速测试工具
- Cypress ------ 端到端测试神器
- Playwright ------ 微软出品,跨浏览器自动化测试
- Testing Library ------ React/Vue/Angular 专用测试工具
- Mocha ------ 灵活、可扩展的测试框架
- Chai ------ BDD/TDD 断言库(常配 Mocha)
- Sinon.js ------ 间谍、存根、模拟函数
- MSW (Mock Service Worker) ------ API 模拟神器
- Puppeteer ------ Headless Chrome Node.js API
🛠️ 8. 构建与打包(Build & Bundlers)
优化、压缩、打包你的前端资源
- Vite ------ 下一代前端构建工具
- Webpack ------ 老牌模块打包器
- Rollup ------ 库打包首选
- Parcel ------ 零配置打包工具
- esbuild ------ 极速 JS 打包/压缩工具
- SWC (Speedy Web Compiler) ------ Rust 编写的转译器
- Turbopack ------ Webpack 作者新作(Next.js 默认)
- Snowpack ------ O(1) 构建速度的打包器
www.snowpack.dev(已归档,但仍有参考价值)
- Rspack ------ 字节跳动出品,类 Webpack API,Rust 驱动
- Farm ------ 新一代 Rust 构建工具(挑战 Vite)
📱 9. 移动端开发(Mobile Development)
构建跨平台或高性能移动 Web 应用
- React Native ------ 使用 React 构建原生 App
- Ionic ------ 基于 Web 技术的跨平台框架
- Capacitor ------ Web 应用 → 原生 App(Ionic 出品)
- NativeScript ------ 直接调用原生 API
- Quasar Framework ------ 一套代码构建 Web/移动/桌面/Electron
- Framework7 ------ 专为 iOS/Android 设计的 UI 框架
- Onsen UI ------ 与 Vue/React/Angular 集成的移动端 UI
- Flutter Web ------ Dart 编写,编译到 Web(Google)
- H5 Plus (DCloud) ------ 国内流行 HTML5+ 原生能力扩展
- Taro ------ 一套代码多端运行(React 语法)
💻 10. 桌面端开发(Desktop Apps)
使用 Web 技术构建跨平台桌面应用
- Electron ------ GitHub 出品,最流行桌面框架
- Tauri ------ Rust + WebView,轻量级替代 Electron
- Neutralinojs ------ 超轻量桌面应用框架
- NW.js ------ Node + WebKit 桌面应用框架
- Proton Native ------ React 语法写原生桌面应用
proton-native.js.org(社区维护中)
- DeskGap ------ 轻量级 Node + WebView 框架
- NodeGui ------ 使用 Qt 绑定构建原生 UI
- Flutter Desktop ------ 一套代码构建多端(含桌面)
- Beeware (Toga) ------ Python 编写跨平台 GUI
- Wails ------ Go + Web 前端构建桌面应用
🕶️ 11. 3D与游戏(3D & Game Development)
在浏览器中创建 3D 场景和游戏
- Three.js ------ 最流行的 WebGL 3D 库
- Babylon.js ------ 微软出品,功能完整的游戏引擎
- PlayCanvas ------ 云端协作的 3D 引擎
- Cannon.js ------ 3D 物理引擎(配 Three.js)
- Ammo.js ------ Bullet Physics 的 JS 移植版
- PixiJS ------ 2D WebGL 渲染引擎(游戏/动画)
- Phaser ------ HTML5 游戏框架
- Zdog ------ 伪 3D 扁平化渲染引擎
- Troika 3D Text ------ Three.js 3D 文字渲染
- Drei ------ Three.js 的 React 组件封装库
🗺️ 12. 地图与GIS(Maps & GIS)
在应用中集成地图、定位、地理信息
- Leaflet ------ 轻量级开源地图库
- Mapbox GL JS ------ 高性能矢量地图渲染
docs.mapbox.com/mapbox-gl-j...
- OpenLayers ------ 企业级地图解决方案
- Google Maps Platform JS API ------ 谷歌官方地图
developers.google.com/maps/docume...
- ArcGIS API for JavaScript ------ Esri 企业 GIS 平台
developers.arcgis.com/javascript
- Deck.gl ------ Uber 出品,大数据可视化地图层
- CesiumJS ------ 3D 地球与地图引擎
- React-Leaflet ------ React 封装的 Leaflet
- Vue2Leaflet / Vue3Leaflet ------ Vue 封装 Leaflet
- MapLibre GL JS ------ Mapbox GL 的开源分支
🎧 13. 音视频处理(Audio & Video)
处理、播放、录制音视频内容
- Howler.js ------ Web Audio API 封装,游戏音效首选
- WaveSurfer.js ------ 音频波形可视化
- Video.js ------ 通用 HTML5 视频播放器
- hls.js ------ 在浏览器中播放 HLS 流
- MediaRecorder API 封装库 ------ 如
RecordRTC
- Tone.js ------ Web 音乐创作框架
- Plyr ------ 简洁美观的 HTML5 媒体播放器
- Shaka Player ------ Google 出品,支持 DASH/DRM
- Web Audio API 原生 + 库 ------ 如
WAAPI
+Tuna.js
(音频效果器)
- Mux.js ------ 视频转封装/转码工具库(B站等使用)
🌍 14. 国际化与本地化(i18n & L10n)
支持多语言、多地区、多文化
- i18next ------ 功能完整、插件丰富
- react-i18next ------ React 专用 i18next 封装
- Vue I18n ------ Vue 官方国际化插件
- FormatJS (react-intl) ------ Yahoo 出品,支持 ICU
- Polyglot.js ------ Airbnb 轻量级方案
- LinguiJS ------ 开发者友好的 React 国际化
- Fluent.js ------ Mozilla 出品,语法强大
- Rosetta ------ 超轻量(1kB)国际化库
- Svelte-i18n ------ Svelte 专用国际化
- next-intl ------ Next.js 专用国际化方案
⚡ 15. 性能优化与监控(Performance & Monitoring)
提升加载速度、运行效率、错误追踪
- Lighthouse ------ Google 官方性能审计工具
developer.chrome.com/docs/lighth...
- Web Vitals ------ 核心用户体验指标库
- Sentry ------ 错误监控与性能追踪
- LogRocket ------ 录屏 + 日志 + 性能分析
- BundlePhobia ------ 查看 npm 包体积影响
- Import Cost ------ VS Code 插件,实时显示导入包大小
marketplace.visualstudio.com/items?itemN...
- React DevTools Profiler ------ React 性能分析器
- Why Did You Render ------ 监控 React 不必要重渲染
- Perfume.js ------ 轻量级 Web 性能监控
- SpeedCurve / Calibre / Treo ------ 企业级性能监控平台(商业)
speedcurve.com | calibreapp.com