我做了一个在线工具导航网站!
我做了一个在线工具导航网站!
大家好!最近,我一直想拥有一个属于自己的在线工具导航网站,把那些常用、好用的在线工具聚合在一起。最终的目标是:界面要足够漂亮、访问要足够快、维护要足够简单。
经过一番折腾,我非常开心地向大家宣布,我的网站上线了!
在线体验地址: 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
感谢阅读!