type
status
date
slug
summary
tags
category
icon
password
我做了一个在线工具导航网站！
大家好！最近，我一直想拥有一个属于自己的在线工具导航网站，把那些常用、好用的在线工具聚合在一起。最终的目标是：**界面要足够漂亮、访问要足够快、维护要足够简单**
。
经过一番折腾，我非常开心地向大家宣布，我的网站上线了！
**在线体验地址** : **<https://nav.maynor1024.live/>** **项目源码地址** : **<https://github.com/xianyu110/online-tools-collection>**
这篇文章，我想和大家分享一下这个网站从一个简单的静态页面，一步步演进成一个高性能、易于维护的现代化 Web 应用的全过程。
一、最初的版本：一个巨大的 HTML 文件
一开始，我的想法很简单：用一个 `index.html` 文件，把所有的分类和工具链接都写进去。
这种方式虽然直接，但很快就暴露了两个致命的缺点：
- **性能瓶颈** ：随着工具越来越多，`index.html` 文件变得异常臃肿（超过 700 行代码！）。浏览器需要下载完这个巨大的文件才能开始渲染页面，导致 **首次加载速度非常慢** 。
- **维护噩梦** ：每次想增加或修改一个工具，都得在密密麻麻的 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）工作流。
部署流程
- 将所有代码推送到 GitHub 仓库。
- 在 Vercel 上，授权并关联我的 GitHub 仓库。
- 点击 “**Deploy** ”。
就这么简单！Vercel 自动完成了所有部署工作。更棒的是，从此以后，**我本地的任何代码修改，只要推送到 GitHub 的`main` 分支，Vercel
就会自动重新部署网站**，全程无需手动干预。
结语
从一个笨重的单文件页面，到一个数据驱动、动态加载、自动部署的现代化应用，这次实践让我对前端性能优化和工程化有了更深的理解。
最终的产品让我非常满意：它不仅看起来酷，而且 **快如闪电** ，维护起来也异常轻松。如果你也对这个项目感兴趣，欢迎访问我的网站，或者去 GitHub
仓库看看源码！
- **网站链接** : <https://nav.maynor1024.live/>
- **源码链接** : <https://github.com/xianyu110/online-tools-collection>
感谢阅读！
- 作者:Maynor
- 链接:https://maynor1024.live/article/2dd1f390-6aa9-81f0-8c95-eaeb39d7a0b4
- 声明:本文采用 CC BY-NC-SA 4.0 许可协议，转载请注明出处。
