【记录】工具目录

这里存放各种可能用到的用不到的东西, 真用到时方便查找😄

当然平日里经常用到的, 耳熟能详的, 我就不放进来了, 主要是起个备忘录的作用


CSS

兼容查询

动画

可生成matrix的网站

名称 网址
matrix3d http://ds-overdesign.com/transform/matrix3d.html
CSS-Matrix3d https://github.com/Zhangdroid/CSS-Matrix3d
matrix http://meyerweb.com/eric/tools/matrix/
tools http://www.f2e.name/case/css3/tools.html

高逼格

PostCss 值得收藏的插件

功能 插件名
运行时变量 POSTCSS-CUSTOM-PROPERTIES
与SCSS一致的变量实现 POSTCSS-SIMPLE-VARS
实现类似SASS的@MIXIN的功能 POSTCSS-MIXINS
实现类似SASS的继承功能 POSTCSS-EXTEND
实现类似SASS的IMPORT POSTCSS-IMPORT
面向未来 CSSNext
修复过去(兼容IE,zomm、一像素留白等) CSS Grace

PWA

  • 集成化解决方案 lavas
  • 离线状态检测插件 offline.js

Node

框架

功能 插件名 周边生态
帮助实现DI的库 Awilix awilix-koa
实现控制反转&构造注入的框架 InversifyJS inversify-koa-utils

性能测试

功能 名称
性能测试 Benchmark.js

webpack4

学习帮助

  • webpack-internal-plugin-relation 可视化的webpack 钩子

功能性能类

功能 插件名
自动插入html及静态文件 HtmlWebpackPlugin【配置自动注入loading(监测资源)】
抽离css文件 MiniCssExtractPlugin
清空指定目录 CleanWebpackPlugin
js 深度 tree sharking 基于ES6模块 webpack-deep-scope-plugin
css tree sharking PurifyCSSPlugin
多核打包件 [需要babel] uglifyjs-webpack-plugin[官方], happypack
前端缓存负载【自动生成缓存文件】 Webpack Manifest Plugin
js 压缩 以及 es压缩 多核压缩 webpack-parallel-uglify-plugin, happypack
hint css 多核压缩css css-nano, optimize-css-assets-webpack-plugin
js 转 ast静态语法分析树 acorn , acorn-walk
能对html进行hint 以及 fix 的插件 html-minifier, html-minifier-lint
搬运静态文件 copy-webpack-plugin
在html 插入静态资源路径 add-asset-html-webpack-plugin

优化体验类

功能 插件名
监测 webpack 打包速度 speed-measure-webpack-plugin
打包成功通知 webpack-build-notifier
显示打包进度 progress-bar-webpack-plugin
信息面板优化 webpack-dashboard[需要配置Pagejson], webpack-jarvis[网页中浏览]
修改cmd 标题 node-bash-title[ github ][cmder 无效]

loader

功能 插件名
缓存Loader结果 cache-loader

AST

  • acorn 生成 Ast
  • acorn-walk 将AST转回代码
  • estraverse 用于遍历Ast 树

JavaScript

颜色提取

  • RGBaster

TypeScript

运行工具

功能 插件名 周边生态
在node中不用编译就运行 ts-node ts-node-dev 热重启

Linux

vim


算法

学习帮助

k8s

图形学

canvas 库

物理引擎

Three

  • stats.min.js 显示动画帧率

性能优化

更新算法(文件增量更新)

你的支持将鼓励我继续创作