依赖：从 100+ 到 0
原来有 110 个 npm 包（echarts、three、antd、@tensorflow、cannon-es……）， yarn.lock 接近 4000 行。现在一个依赖都不需要，浏览器原生就是一个合格的前端运行环境。
Sally Dev · 个人技术站
从 Demo 集合到
技术博客的迁移记录
这个站点以前是"可视化集合"——一个塞了上百个 Three.js / Canvas / AI 动效演示的 React 单页应用，依赖上百个 npm 包，构建一次跑两分钟。最近把它拆了， 换成纯静态 HTML，只保留部署经验、工程重构和稳定性方面的笔记。
迁移记录
从 React 单页应用到一个纯静态文件
构建：从 120s 到 0s
Webpack 5 + Babel + TypeScript 全量构建约 2 分钟，开发热更新也要 5~8 秒。 去掉构建之后，改完 HTML 刷新浏览器就生效，迭代速度差了一个数量级。
部署：原子替换 + 回滚
一个 shell 脚本完成打包、scp 上传、远程解压到临时目录、mv 原子替换旧版本、 nginx reload；旧版本自动备份，回滚就是改个目录名的事，不需要 CI/CD 也能跑。
HTunnel：穿透内网到公网
服务器只有 80/443 端口，通过 HTunnel 做内网穿透：服务端收公网流量， 转发给本地 nginx (127.0.0.1:8080)，systemd 托管，异常自动重启。 域名 www.sallydev.online 绑定 CNAME 记录。
技术笔记
关于这次重构的一些技术细节
yarn.lock 从 4000 行删到 0，我做了什么
原来项目有 110 个 dependencies，yarn.lock 锁了 3972 行。拆解过程： 对每个依赖问"这个页面真的需要吗？"——echarts 和 @antv/g6 是演示核心， 但博客不需要图表库；three.js 和 cannon-es 是 3D 演示用的，内容页用不到。 最终结论：所有 npm 依赖都是演示层需要的，内容层只需要 HTML + CSS。
展开 →Nginx 静态站点部署：从一个 shell 脚本说起
部署流程：tar 打包本地 docs/ → scp 到服务器 /tmp → 解压到临时目录 → mv 原子替换 webroot → nginx -t 校验 → systemctl reload nginx。 旧版本 mv 到 .bak 目录做快速回滚。没有 CI/CD 工具，没有 Docker， 一个不到 30 行的 bash 函数就够用。关键是：先解压到临时目录再 mv， 避免上传过程中用户看到不完整的页面。
展开 →内网穿透选型：HTunnel vs frp vs ngrok
服务器只开了 80/443，没有公网 IP 直连内网开发机，需要一层隧道。 对比了 frp（功能全但配置重）、ngrok（有 SaaS 层依赖）、HTunnel（极简二进制）。 最终选了 HTunnel：服务端一个二进制、客户端一个二进制、一份 YAML 配置， systemd 托管，开机自启。服务端路由 www.sallydev.online → 客户端， 客户端转发到本地 127.0.0.1:8080（nginx）。
展开 →从 Webpack 5 到手写 HTML：项目结构前后对比
重构前：src/ 下有 pages/、components/、hooks/、store/、
router/、utils/、images/、assets/、types/，webpack 配置拆了三个文件。
重构后：docs/ 下有 index.html、styles/main.css、
public/favicon.ico、CNAME。整个项目从"工程"变成了"文件"。
每个来到这个仓库的人 3 秒就能理解全貌，不需要翻 webpack 配置。
关于本站
前身与去向
前身：visualization-collection 是一个 React + TypeScript 单页应用， 包含 110 个 npm 依赖、Webpack 5 构建、多路由/全局状态/上百个演示页面。 构建设置拆了 3 个 webpack 配置文件（webpack.base.js / dev.js / prod.js）， src/ 下分了 10 多个目录层级。这次迁移将其精简为纯静态站点， 所有演示代码移入独立仓库，本站只保留工程实践和部署相关的技术笔记。