前端常用网站汇总，一定有你想要的🔥🔥🔥

小知识，大挑战！本文正在参与「程序员必备小知识」创作活动

本文已参与「掘力星计划」，赢取创作大礼包，挑战创作激励金

前言

前端如此多娇，令天下码农尽折腰。

前端知识琳琅满目、良莠不齐，使我们在筛选甄别的过程中所花费的时间着实不小。为了避免重复造轮子，提高开发效率，故将常用的前端开发所使用的网站归类。

后续将持续完善，建议可以先加个收藏（Ctrl + D 或 command + D），以备不时之需。

JavaScript 实用工具库

`lodash`

www.lodashjs.com

`underscore`

underscorejs.net

`outils`

github.com/proYang/out… (业务代码工具库，可以按需引入，点击可直接查看函数的实现。易学易用，个人觉得值得推荐。)

`ramda`

github.com/ramda/ramda（国外的一个工具库，只是了解，不常用。）

常用动画库、图表汇总（常用）

`animejs`

animejs.com/(推荐，压缩后仅7kb, 易用，能实现较复杂的效果)

`animista`

animista.net/play/basic (推荐尝试，自定义动画神器，有了它可以随心所欲的生成css动画代码，再copy到项目中，有效减少多余的未使用的css代码)

`animate.css`

github.com/animate-css…（文件过大，压缩后还有72kb，这个有点失望😔）

`three.js`

github.com/mrdoob/thre…（实现3d动画，基于WebGL）

`d3js`

www.d3js.org.cn/（数据可视化库、兼容性好）

`echarts`

echarts.apache.org/zh/index.ht…（推荐，大家都懂的，目前已被Apache接管）

`Chart.js`

www.chartjs.org/

`highcharts`

www.highcharts.com.cn/

npm库集合

`查npm的下载情况`

npm-stat.com/(输入npm包名，多个包名用逗号隔开，点击Show charts即可查询，可展示天、周、月、年的数据)如下图

`通过分析和对比，我们能初步的评估其生态和活跃度。在技术选型上也能给我们提供参考帮助`

`npm包下载量对比`

www.npmtrends.com/

`常用的npm包`

vuex-persistedstate、vuex-persist 、 js-cookie

、 budo 、 anywhere 、 http-server 、 lodash、echarts、dayjs、screenfull、qrcodejs2、clipboard、vue-clipboard2、nprogress、downloadjs、crypto-js、md5、uuid、mockjs、pdfkit、node-html-pdf、winston(日志服务)、mockjs、vue-quill-editor、node-cron(定时任务)、lru-cache(页面缓存)、chokidar(文件监控)、dotenv-defaults（支持默认值的 dotenv 系统，和devalue类似）、classnames、querystring、vue-lazyload、terser-webpack-plugin、webpack-bundle-analyzer、compression-webpack-plugin、sequelize(nodejs ORM工具)、nodemon(node 启动监听工具)、ts-node、js风格指南（拥有116k的star）

前端监控、埋点

`growingio`

www.growingio.com/（简称gio，埋点统计，数据可视化不错，使用的公司较多。）

fundebug www.fundebug.com/(付费产品，能支持js、nodejs、小程序、java等。如果有条件自研的话，可以参考这个)

`sentry`

sentry.io（自动报告错误和异常）

`sonar`

前端质量代码扫描神器（推荐，很多公司有使用，能兼容不同语言。扫描找出代码中潜在的bug）

`kibana`

功能类似sentry, 在服务端的错误上报。

`pinpoint`

（统计、监控接口情况的工具）

`阿里应用实时监控服务ARMS`

（数据统计、埋点可视化）

`腾讯日志服务`

cloud.tencent.com/document/pr… （数据统计、埋点可视化）

`友盟`

www.umeng.com/ （数据统计、埋点可视化）

UI 、CSS 工具库

`svga`

svga.io/index.html(高新能动画播放)

`gka`

github.com/tagerwang/g…(推荐尝试，一键快速图片优化、生成动画文件)

`tinypng`

tinypng.com/（前端在线压缩必备工具）

`vue ui库`

elementUI、iview、vantUI（有赞出品）、antdv...这里就不一一介绍了。

`react ui库`

Material-UI(个人感觉用户体验真心不错，比如水波纹等)、antDesign、semantic-ui(貌似国外使用较多，不知是否好用，大家有用过吗？)

`angular`

ngAnt(国内基本就它了)、Angular Material（国外较多）

其它工具

多个移动设备同时调试软件: responsively.app/

前端属性、方法兼容性查询：caniuse.com/

在线IDE：

codepen.io/

codesandbox.io/

在线转换(es6转es5)
Babeljs在线转换地址
es6console在线转换及运行
 tool.lu

字体类型下载：m.fonts.net.cn/

图片托管工具：sm.ms/（说白了就是提供了放图…

字体图标托管：www.iconfont.cn/

字体制作: zhuanlan.zhihu.com/p/335738698 (直接引入第三个的字体库是非常大的，对页面性能有很大影响。因此可以利用该工具库，给指定的文字添加字体。) 【font-spider（字蛛）】 fontcreator

WebAssembly: www.wasm.com.cn/ (是一个可移植、体积小、加载快并且兼容 Web 的全新格式)

动态生成图片：dummyimage.com/ （mockjs中生成图片就是使用的这个, 有些中文无法显示，可以将其转为繁体）

github.com/airbnb/java…

word-to-html

最后

如果觉得有帮助，不妨点赞、关注支持一下。如果大家有好用的工具、库，希望能在下方👇🏻 留言，非常感谢。

前端常用网站汇总，一定有你想要的🔥🔥🔥

前言

JavaScript 实用工具库

lodash

underscore

outils

ramda

常用动画库、图表汇总（常用）

animejs

animista

animate.css

three.js

d3js

echarts

Chart.js

highcharts

npm库集合

查npm的下载情况

npm包下载量对比

常用的npm包