偷偷收藏!前端老鸟绝不外传的150个JS插件,让你效率翻3倍…

🖼️ 1. UI组件库(UI Component Libraries)

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

  1. React ------ Facebook 出品的 UI 构建库

react.dev

  1. Vue.js ------ 渐进式 JavaScript 框架

vuejs.org

  1. Svelte ------ 编译时框架,无虚拟 DOM

svelte.dev

  1. Solid.js ------ React-like 语法,极致性能

www.solidjs.com

  1. Qwik ------ 可恢复性框架,超快首屏加载

qwik.builder.io

  1. Lit ------ 轻量级 Web Components 库(Google)

lit.dev

  1. Alpine.js ------ 轻量级"Tailwind for JS"

alpinejs.dev

  1. Preact ------ React 的轻量替代(3kB)

preactjs.com

  1. Mithril.js ------ 超小、超快、全功能框架

mithril.js.org

  1. Stimulus ------ Basecamp 出品,HTML 驱动交互

stimulus.hotwired.dev


🧠 2. 状态管理(State Management)

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

  1. Redux ------ 可预测状态容器

redux.js.org

  1. Zustand ------ 轻量、简单、无模板的状态管理

zustand-demo.pmnd.rs

  1. Jotai ------ 原子化状态管理(React 专用)

jotai.org

  1. Recoil ------ Facebook 实验性原子状态库

recoiljs.org

  1. MobX ------ 响应式状态管理

mobx.js.org

  1. Valtio ------ 代理驱动的简单状态管理

valtio.pmnd.rs

  1. XState ------ 状态机与状态图管理

xstate.js.org

  1. Effector ------ 事件驱动状态管理

effector.dev

  1. Signals ------ Preact 官方状态响应系统

preactjs.com/guide/v10/s...

  1. Hookstate ------ 基于 Hook 的全局状态管理

hookstate.js.org


📊 3. 数据可视化(Data Visualization)

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

  1. D3.js ------ 数据驱动文档的底层可视化库

d3js.org

  1. Chart.js ------ 简单易用的 HTML5 图表库

www.chartjs.org

  1. ECharts ------ 百度出品,企业级图表库

echarts.apache.org

  1. ApexCharts ------ 现代、交互式 SVG 图表

apexcharts.com

  1. Victory ------ React 专用图表库

formidable.com/open-source...

  1. Recharts ------ 基于 React + D3 的组合式图表

recharts.org

  1. Nivo ------ 精美、响应式数据可视化组件

nivo.rocks

  1. Visx ------ Airbnb 出品,D3 的 React 友好封装

airbnb.io/visx

  1. Plotly.js ------ 科学计算与交互式图表

plotly.com/javascript

  1. Frappe Charts ------ GitHub 风格的轻量图表

frappe.io/charts


🎞️ 4. 动画库(Animation Libraries)

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

  1. GSAP ------ 专业级动画引擎

greensock.com/gsap

  1. Framer Motion ------ React 专属动画库

www.framer.com/motion

  1. Anime.js ------ 轻量级 JavaScript 动画引擎

animejs.com

  1. Motion One ------ 高性能 Web 动画库

motion.dev

  1. Popmotion ------ 灵活的动画与手势库

popmotion.io

  1. Mo.js ------ 专为网页动效设计的库

mojs.github.io

  1. Vivus ------ SVG 路径动画绘制

maxwellito.github.io/vivus

  1. ScrollReveal ------ 滚动触发动画

scrollrevealjs.org

  1. AOS (Animate On Scroll) ------ 简单滚动动画

michalsnik.github.io/aos

  1. Tippy.js ------ 工具提示动画库(带过渡)

atomiks.github.io/tippyjs


🧰 5. 工具函数库(Utility Libraries)

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

  1. Lodash ------ JavaScript 实用工具库

lodash.com

  1. Ramda ------ 函数式编程工具库

ramdajs.com

  1. date-fns ------ 现代日期处理库

date-fns.org

  1. Day.js ------ 轻量级 Moment.js 替代

day.js.org

  1. Zod ------ TypeScript 优先的 schema 校验

zod.dev

  1. Yup ------ 表单校验 schema 库

github.com/jquense/yup

  1. Nano ID ------ 短、安全、URL 友好 ID 生成器

github.com/ai/nanoid

  1. clsx ------ 条件化 className 工具

github.com/lukeed/clsx

  1. SWR ------ React 数据请求与缓存

swr.vercel.app

  1. React Query ------ 强大的数据同步与状态管理

tanstack.com/query


📝 6. 表单处理(Form Handling)

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

  1. React Hook Form ------ 高性能 React 表单

react-hook-form.com

  1. Formik ------ React 表单状态管理

formik.org

  1. Final Form ------ 高性能、可扩展表单库

final-form.org

  1. VeeValidate ------ Vue 专用表单校验

vee-validate.logaretm.com

  1. Zod + React Hook Form ------ TypeScript 校验组合拳

react-hook-form.com/ts + https:...

  1. Yup + Formik ------ 经典校验组合

formik.org/docs/guides...

  1. Uniforms ------ Schema 驱动表单生成器

uniforms.tools

  1. React JSON Schema Form ------ JSON Schema → 表单

rjsf-team.github.io/react-jsons...

  1. SurveyJS ------ 动态问卷/调查表单

surveyjs.io

  1. Formily ------ 阿里出品企业级表单解决方案

formilyjs.org


✅ 7. 测试工具(Testing Tools)

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

  1. Jest ------ Facebook 出品的全能测试框架

jestjs.io

  1. Vitest ------ Vite 生态的极速测试工具

vitest.dev

  1. Cypress ------ 端到端测试神器

www.cypress.io

  1. Playwright ------ 微软出品,跨浏览器自动化测试

playwright.dev

  1. Testing Library ------ React/Vue/Angular 专用测试工具

testing-library.com

  1. Mocha ------ 灵活、可扩展的测试框架

mochajs.org

  1. Chai ------ BDD/TDD 断言库(常配 Mocha)

www.chaijs.com

  1. Sinon.js ------ 间谍、存根、模拟函数

sinonjs.org

  1. MSW (Mock Service Worker) ------ API 模拟神器

mswjs.io

  1. Puppeteer ------ Headless Chrome Node.js API

pptr.dev


🛠️ 8. 构建与打包(Build & Bundlers)

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

  1. Vite ------ 下一代前端构建工具

vitejs.dev

  1. Webpack ------ 老牌模块打包器

webpack.js.org

  1. Rollup ------ 库打包首选

rollupjs.org

  1. Parcel ------ 零配置打包工具

parceljs.org

  1. esbuild ------ 极速 JS 打包/压缩工具

esbuild.github.io

  1. SWC (Speedy Web Compiler) ------ Rust 编写的转译器

swc.rs

  1. Turbopack ------ Webpack 作者新作(Next.js 默认)

turbo.build/pack

  1. Snowpack ------ O(1) 构建速度的打包器

www.snowpack.dev(已归档,但仍有参考价值)

  1. Rspack ------ 字节跳动出品,类 Webpack API,Rust 驱动

www.rspack.dev

  1. Farm ------ 新一代 Rust 构建工具(挑战 Vite)

farmfe.org


📱 9. 移动端开发(Mobile Development)

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

  1. React Native ------ 使用 React 构建原生 App

reactnative.dev

  1. Ionic ------ 基于 Web 技术的跨平台框架

ionicframework.com

  1. Capacitor ------ Web 应用 → 原生 App(Ionic 出品)

capacitorjs.com

  1. NativeScript ------ 直接调用原生 API

nativescript.org

  1. Quasar Framework ------ 一套代码构建 Web/移动/桌面/Electron

quasar.dev

  1. Framework7 ------ 专为 iOS/Android 设计的 UI 框架

framework7.io

  1. Onsen UI ------ 与 Vue/React/Angular 集成的移动端 UI

onsen.io

  1. Flutter Web ------ Dart 编写,编译到 Web(Google)

flutter.dev/web

  1. H5 Plus (DCloud) ------ 国内流行 HTML5+ 原生能力扩展

www.dcloud.io/h5p.html

  1. Taro ------ 一套代码多端运行(React 语法)

taro.zone


💻 10. 桌面端开发(Desktop Apps)

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

  1. Electron ------ GitHub 出品,最流行桌面框架

www.electronjs.org

  1. Tauri ------ Rust + WebView,轻量级替代 Electron

tauri.app

  1. Neutralinojs ------ 超轻量桌面应用框架

neutralino.js.org

  1. NW.js ------ Node + WebKit 桌面应用框架

nwjs.io

  1. Proton Native ------ React 语法写原生桌面应用

proton-native.js.org(社区维护中)

  1. DeskGap ------ 轻量级 Node + WebView 框架

deskgap.com

  1. NodeGui ------ 使用 Qt 绑定构建原生 UI

nodegui.org

  1. Flutter Desktop ------ 一套代码构建多端(含桌面)

docs.flutter.dev/desktop

  1. Beeware (Toga) ------ Python 编写跨平台 GUI

beeware.org

  1. Wails ------ Go + Web 前端构建桌面应用

wails.io


🕶️ 11. 3D与游戏(3D & Game Development)

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

  1. Three.js ------ 最流行的 WebGL 3D 库

threejs.org

  1. Babylon.js ------ 微软出品,功能完整的游戏引擎

www.babylonjs.com

  1. PlayCanvas ------ 云端协作的 3D 引擎

playcanvas.com

  1. Cannon.js ------ 3D 物理引擎(配 Three.js)

schteppe.github.io/cannon.js

  1. Ammo.js ------ Bullet Physics 的 JS 移植版

github.com/kripken/amm...

  1. PixiJS ------ 2D WebGL 渲染引擎(游戏/动画)

pixijs.com

  1. Phaser ------ HTML5 游戏框架

phaser.io

  1. Zdog ------ 伪 3D 扁平化渲染引擎

zzz.dog

  1. Troika 3D Text ------ Three.js 3D 文字渲染

protectwise.github.io/troika

  1. Drei ------ Three.js 的 React 组件封装库

github.com/pmndrs/drei


🗺️ 12. 地图与GIS(Maps & GIS)

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

  1. Leaflet ------ 轻量级开源地图库

leafletjs.com

  1. Mapbox GL JS ------ 高性能矢量地图渲染

docs.mapbox.com/mapbox-gl-j...

  1. OpenLayers ------ 企业级地图解决方案

openlayers.org

  1. Google Maps Platform JS API ------ 谷歌官方地图

developers.google.com/maps/docume...

  1. ArcGIS API for JavaScript ------ Esri 企业 GIS 平台

developers.arcgis.com/javascript

  1. Deck.gl ------ Uber 出品,大数据可视化地图层

deck.gl

  1. CesiumJS ------ 3D 地球与地图引擎

cesium.com/platform/ce...

  1. React-Leaflet ------ React 封装的 Leaflet

react-leaflet.js.org

  1. Vue2Leaflet / Vue3Leaflet ------ Vue 封装 Leaflet

vue2-leaflet.netlify.app

  1. MapLibre GL JS ------ Mapbox GL 的开源分支

maplibre.org


🎧 13. 音视频处理(Audio & Video)

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

  1. Howler.js ------ Web Audio API 封装,游戏音效首选

howlerjs.com

  1. WaveSurfer.js ------ 音频波形可视化

wavesurfer.xyz

  1. Video.js ------ 通用 HTML5 视频播放器

videojs.com

  1. hls.js ------ 在浏览器中播放 HLS 流

github.com/video-dev/h...

  1. MediaRecorder API 封装库 ------ 如 RecordRTC

recordrtc.org

  1. Tone.js ------ Web 音乐创作框架

tonejs.github.io

  1. Plyr ------ 简洁美观的 HTML5 媒体播放器

plyr.io

  1. Shaka Player ------ Google 出品,支持 DASH/DRM

shaka-player-demo.appspot.com

  1. Web Audio API 原生 + 库 ------ 如 WAAPI + Tuna.js(音频效果器)

github.com/Theodeus/tu...

  1. Mux.js ------ 视频转封装/转码工具库(B站等使用)

github.com/videojs/mux...


🌍 14. 国际化与本地化(i18n & L10n)

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

  1. i18next ------ 功能完整、插件丰富

www.i18next.com

  1. react-i18next ------ React 专用 i18next 封装

react.i18next.com

  1. Vue I18n ------ Vue 官方国际化插件

vue-i18n.intlify.dev

  1. FormatJS (react-intl) ------ Yahoo 出品,支持 ICU

formatjs.io

  1. Polyglot.js ------ Airbnb 轻量级方案

airbnb.io/polyglot.js

  1. LinguiJS ------ 开发者友好的 React 国际化

lingui.dev

  1. Fluent.js ------ Mozilla 出品,语法强大

projectfluent.org

  1. Rosetta ------ 超轻量(1kB)国际化库

github.com/lukeed/rose...

  1. Svelte-i18n ------ Svelte 专用国际化

github.com/sveltekit/i...

  1. next-intl ------ Next.js 专用国际化方案

next-intl-docs.vercel.app


⚡ 15. 性能优化与监控(Performance & Monitoring)

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

  1. Lighthouse ------ Google 官方性能审计工具

developer.chrome.com/docs/lighth...

  1. Web Vitals ------ 核心用户体验指标库

web.dev/vitals

  1. Sentry ------ 错误监控与性能追踪

sentry.io

  1. LogRocket ------ 录屏 + 日志 + 性能分析

logrocket.com

  1. BundlePhobia ------ 查看 npm 包体积影响

bundlephobia.com

  1. Import Cost ------ VS Code 插件,实时显示导入包大小

marketplace.visualstudio.com/items?itemN...

  1. React DevTools Profiler ------ React 性能分析器

react.dev/learn/devto...

  1. Why Did You Render ------ 监控 React 不必要重渲染

github.com/welldone-so...

  1. Perfume.js ------ 轻量级 Web 性能监控

zizzamia.github.io/perfume

  1. SpeedCurve / Calibre / Treo ------ 企业级性能监控平台(商业)

speedcurve.com | calibreapp.com


相关推荐
会豪2 小时前
如何让自己的前端项目更优雅
前端
uhakadotcom2 小时前
致新人:如何编写自己的第一个VSCode插件,以使用@vscode/vsce来做打包工具为例
前端·面试·github
流***陌2 小时前
用工招聘小程序:功能版块与前端设计解析
前端·小程序
russ3852 小时前
Vue3.4版本新特性,更优雅的处理组件间的数据双向绑定
vue.js
之恒君2 小时前
typescript(tsconfig.json - esModuleInterop)
前端·typescript
夏天19952 小时前
React:聊一聊状态管理
前端·javascript·react.js
李剑一2 小时前
低代码平台现在为什么不行了?之前为什么行?
前端·面试
鹏多多2 小时前
vue的监听属性watch的详解
前端·javascript·vue.js
streaker3032 小时前
Vue3 开发态轻量组件文档方案:基于动态路由 + Markdown
vue.js·vite