我做了一个在线工具导航网站！

我做了一个在线工具导航网站！

大家好！最近，我一直想拥有一个属于自己的在线工具导航网站，把那些常用、好用的在线工具聚合在一起。最终的目标是：界面要足够漂亮、访问要足够快、维护要足够简单。

经过一番折腾，我非常开心地向大家宣布，我的网站上线了！

在线体验地址: https://nav.maynor1024.live/
项目源码地址: https://github.com/xianyu110/online-tools-collection

这篇文章，我想和大家分享一下这个网站从一个简单的静态页面，一步步演进成一个高性能、易于维护的现代化 Web 应用的全过程。

一、最初的版本：一个巨大的 HTML 文件

一开始，我的想法很简单：用一个 index.html 文件，把所有的分类和工具链接都写进去。

这种方式虽然直接，但很快就暴露了两个致命的缺点：

1. 性能瓶颈：随着工具越来越多，index.html 文件变得异常臃肿（超过 700 行代码！）。浏览器需要下载完这个巨大的文件才能开始渲染页面，导致 首次加载速度非常慢。
2. 维护噩梦：每次想增加或修改一个工具，都得在密密麻麻的 HTML 代码里找到相应位置，小心翼翼地进行修改，非常低效且容易出错。

我意识到，这种“一把梭”的写法必须被重构。

二、性能革命：数据与视图的分离

为了解决上面的问题，我进行了一次彻底的重构，核心思想是现代 Web 开发的基础：数据与视图分离。

具体的改造分为三步：

第 1 步：数据提取为 JSON

我编写了一个一次性的 Node.js 脚本 (generate-json.js)，利用 cheerio 这个库（可以理解为服务器端的 jQuery）来解析我那个巨大的 index.html 文件。

脚本智能地遍历原始 HTML 的 DOM 结构，将每个分类的标题、图标以及它包含的所有工具的名称、链接和图标提取出来，最终生成了一个结构清晰、内容干净的 tools.json 文件。这个文件成为了网站所有内容的“唯一真实来源”。

第 2 步：JavaScript 动态渲染

我彻底重写了 script.js 文件，新的脚本逻辑如下：

• 页面加载后，使用 fetch API 异步请求 tools.json 文件。
• 拿到数据后，通过 JavaScript 遍历 JSON 数组和对象。
• 动态地创建出所有分类和工具列表的 HTML 元素。
• 最后，将生成好的 HTML 代码 注入 到 index.html 那个轻量级的骨架中。

这次重构带来了立竿见影的效果：index.html 的体积急剧缩小，浏览器几乎可以 瞬间完成加载和渲染，用户会立刻看到页面的整体框架，而工具数据则在后台悄无声息地加载并填充进来，用户体验大大提升。

第 3 步：非阻塞加载外部资源

网站使用了 Google Fonts，但它的加载会阻塞页面渲染。我通过给 <link> 标签加上 rel="preload" 和 onload 事件处理，将字体文件改为 异步加载，进一步清除了渲染路径上的障碍。

三、现代化部署：GitHub + Vercel

代码优化完成后，我选择了 Vercel 作为部署平台。它与 GitHub 的无缝集成为我提供了堪称完美的自动化（CI/CD）工作流。

部署流程

1. 将所有代码推送到 GitHub 仓库。
   

2. 在 Vercel 上，授权并关联我的 GitHub 仓库。

3. 点击 “Deploy”。

就这么简单！Vercel 自动完成了所有部署工作。更棒的是，从此以后，我本地的任何代码修改，只要推送到 GitHub 的 main 分支，Vercel 就会自动重新部署网站，全程无需手动干预。

结语

从一个笨重的单文件页面，到一个数据驱动、动态加载、自动部署的现代化应用，这次实践让我对前端性能优化和工程化有了更深的理解。

最终的产品让我非常满意：它不仅看起来酷，而且 快如闪电，维护起来也异常轻松。如果你也对这个项目感兴趣，欢迎访问我的网站，或者去 GitHub 仓库看看源码！

• 网站链接: https://nav.maynor1024.live/
• 源码链接: https://github.com/xianyu110/online-tools-collection

感谢阅读！