又来了。
本次更新没有修 Bug，其实是我们没收到新的 Bug 报告，于是就开始全力做新功能。
其实这个版还可以再发晚一点，但从 6 月 30 日以来小工具集的访问量就开始掉，思来想去还是再发一个新版本吧。
当然，这个版本绝对不是敷衍，事实上它是小工具集 v3 立项以来变更复杂度最高的版本。
我们内测期间有一个复杂度比较高的版本，如果它的复杂度是 22，那这个版本就是 30。
那我们来看看这个版本的主要变更吧。
视觉效果优化
首先，我们重写了首页：
新版首页
好像也没啥变化？那打开开发者工具看下：
内行看门道，这些类名肯定有人熟悉吧。
是的，我们引入了 Tailwind CSS，并用它重写了部分组件。
具体的更改有很多，列举几个大家感知比较强的：
首页的小工具卡片现在有鼠标悬浮效果了。
深色模式的视觉效果更加统一：
首页（深色模式）
LP 理事会推文检测工具的视效有一些改进：
浅色模式
深色模式
按钮现在有了悬浮和点击效果。
另外，我们现在有了自己的主题色：#FFFFFF（纯黑色）
开玩笑的，我们想给大家打造简洁高效的产品，所以配色方面比较平淡。
另外页面中几乎没有纯黑纯白，对比度太高其实也不好看。
商城贝市分析工具数据增强
现在你可以在商城贝市分析工具中直接查看当前市场买卖价格和挂单量。
交易限价信息和手续费信息也可以直接查看到，不再需要去贝市尝试了。
同时，我们还加入了挂单量趋势图，希望能给大家的交易提供更多参考数据。
有人说我们和贝市杠上了，这几个版本一直在更贝市分析工具......其实我们访问量最多的是上榜文章查询工具，我们和贝市也没太多恩怨情仇。
只是近期大家对贝市的讨论热度高，贝市数据库也是我们所有线上库中数据量最多的，给贝市分担一下压力，多做一些数据分析方面的工作也好。
现在这个工具的性能也是最差的......我们会在未来的几个版本中优化，一定会。
服务状态面板上线
其实我们有一个统一的 面板，但项目有点多了大家看不清楚，有时简书 API 有波动，提示部分服务出现故障就以为小工具集也跟着宕机了，其实这两者间联系并没有那么紧密。
于是我们给小工具集做了一个单独的 状态面板，可以看到小工具集本身和一些依赖服务的状态：
入口在小工具集首页最下方「服务状态」按钮。
如果这东西提示部分故障，那可能真的出了点小问题，请大家向我们反馈。
虽然我们会收到推送，能看到的指标也比大家多，但白给的捉虫计划奖励不可错过～
性能优化
几乎每次功能版本都会有性能优化，可以说这是我们的执念之一了。
不过我们一直讲究合理优化，万恶之源（指提早优化）还是要规避一下的。
还是回到我们熟悉的开发者工具，网页选项卡：
Service Worker，请求时间 0ms，前端开发者应该知道我们干了啥。
现在简书小工具集支持作为 PWA 安装了。
也就是说，小工具集可以作为一个 App 安装，和其它 App 一样显示在手机主屏幕上，并拥有独立的界面。
所以别在问我们为什么不做 App 了，这不是来了么，虽然不是大家想象的那种原生应用，但体验肯定比网站好。
Android 设备上的 Google Chrome、Firefox 都支持 PWA，会提示「是否安装此应用」，跟随指引操作即可。
iOS 端的 Safari 浏览器也同样支持，在标签页选项卡点击「添加到主屏幕」即可。
另外，这个 App 不需要更新，新版本发布时会自动同步。
即使不安装小工具集 PWA，你也能体验到性能提升，访问后的页面几乎没有加载时间，可以瞬间跳转。
得益于 Tailwind CSS，我们减少了对组件库的依赖，资源文件大小有了一定下降：
- 首页资源大小：84.8kB => 72.5kB（-14.5%）
性能优化总会和 Lighthouse 报告一起出现，这次我们主要测手机端的表现：
Lighthouse 报告（优化前）
Lighthouse 报告（优化后）
我们还顺便打满了可访问性、最佳实践和搜索引擎优化得分。
上线了新的网站图标～很丑，我们自己画的。
其实图标这东西有没有都行，丑点也没关系，主要 PWA 强制要求有图标，那就简单做一个吧，发版后我自己装了 PWA，图标展示效果还不错。
其它
网站标题会跟随页面自动变化啦，其实这功能在 v2 就有，实现起来也不复杂，v3 刚上线的时候忘记做了，现在补上。
现在小工具集中选择文字会有更美观的高亮展示。
还有一些零碎的优化，比如我们用 Prettier 格式化了前端代码，某些部分的代码逻辑优化等，感兴趣可以去我们的 GitHub Repo 看。
后记
下个版本继续和贝市杠，啊不是，给贝市分析工具加更多新功能。
还有更多小工具正在来的路上，记得关注哦。
访问简书小工具集：https://tools.sscreator.com/
网友评论