为什么我抛弃 WordPress，转而使用 Vanilla JS + Edge（并在 Lighthouse 中获得 100/100）
发布: (2026年2月10日 GMT+8 17:59)
5 分钟阅读
原文: Dev.to
Source: Dev.to
介绍
我们生活在一个 5 MB JavaScript 包的世界。
React、Angular、Vue… 是了不起的工具，但对于作品集或展示站点，它们往往是 过度 的。
作为一名学生开发者，我问自己：
“我能否在不使用任何框架的情况下，构建一个感觉瞬时、外观现代，并在 Lighthouse 上获得满分 100/100 的站点？”
是的。 这就是我构建 Drasiotech.dev 的方式。
🐢 问题：“框架税”
大多数学生作品集都是基于 WordPress 或庞大的 React 模板构建的，导致：
- 慢速的 TTI（可交互时间）
- 巨大的 JS 负载 仅仅是为了渲染一个静态页面
- 通用的设计 看起来和其他人一模一样
我想要原始的性能——更贴近金属（浏览器）。
⚡ 解决方案：Edge + 原生 JS
我称我的技术栈为 “Pure Performance Stack”：
- HTML5 与 CSS3 变量 – 不使用 Tailwind，不使用 Bootstrap；仅使用干净、语义化的代码。
- Vanilla JavaScript – 无需编译步骤，无水合噩梦。
- Vercel Edge – 从离用户最近的节点提供内容。
结果
| 指标 | 分数 |
|---|---|
| 性能 | 100 |
| 可访问性 | 100 |
| 最佳实践 | 100 |
| SEO | 100 |
🐍 “复活节彩蛋” 基准测试
如果你感受不到，性能就显得无聊。我在页脚（或通过 /snake 路径）隐藏了一个 Snake Game（贪吃蛇游戏）。它是一个 latency benchmark，体积不足 5 KB，加载瞬间完成。
挑战： 我的最高分是 410。你能超越吗？
👉 在此玩基准测试
🛠️ Lessons Learned
- DOM 操作很快。 你并不总是需要虚拟 DOM。
- CSS Grid > Flexbox 用于复杂布局（例如，我的 Bento Grid 设计）。
- 图片很重要。 预加载 WebP 图片为我节省了约 300 ms 的加载时间。
🚀 检查代码
整个项目是 开源 的。如果你是学生或初级开发者，想了解 “无框架” 结构，请查看仓库：
Source: …
⚡ 项目概述
Drasiotech 是在 BTS SIO SLAM 课程中完成的一个激进技术演示。
在 Web 充斥着复杂框架的时代，该项目采取了相反的做法：回归基础，以实现绝对性能。
目标是证明：使用原生技术栈（HTML5/CSS3/JS）并结合 Edge 基础设施（Vercel），在速度、SEO 和生态设计方面能够超越现代解决方案。
🎯 Lighthouse 评分
| 指标 | 分数 | 影响 |
|---|---|---|
| 性能 | 🟢 100 | 加载瞬间（< 0.5 s LCP） |
| 可访问性 | 🟢 100 | 兼容屏幕阅读器和键盘导航 |
| 最佳实践 | 🟢 100 | HTTPS、HSTS、无漏洞 |
| SEO | 🟢 100 | 结构化数据（JSON‑LD）与语义化标记 |
🛠️ 技术栈
项目遵循 “Zero Bloat” 哲学——不使用任何多余的库。
- HTML5，CSS3（变量，网格）
- 原生 JavaScript
- Vercel Edge Functions / Edge Network
- 无服务器架构
- WebP 图像，预加载，语义化标记
无论你的技术栈是什么，继续发布吧！ 🚀
如果你喜欢这篇文章，请在仓库上点星，或在评论中告诉我你的贪吃蛇最高分！