我如何使用 Vanilla JS 构建了一个无服务器 PDF 编辑器（且云费用为 $0）

Source: Dev.to

我们都有过这样的时刻。需要合并两个 PDF 合同或压缩一个视频文件，于是去 Google 搜索。找到一个工具，上传文件，然后……等待。

接着你会想：“等一下，我是不是刚把我的报税表上传到了一个我读不出名字的国家的随机服务器？”

这种偏执正是我创建 DuneTools 的原因——一套 PDF、视频和图片工具，100 % 在浏览器中运行。无需上传。没有隐私风险。纯粹的 JavaScript。

1. 架构：客户端为王 👑

大多数 PDF 工具的工作方式如下：

User -> Upload -> Server processes (Python/PHP) -> Download

DuneTools 的工作方式如下：

User -> Browser (WASM + JS) processes -> Done

通过使用 pdf-lib 和 FFmpeg 的 WebAssembly 包装器，现代浏览器已经足够强大，能够处理繁重的媒体编辑。这带来了两个巨大的好处：

• 隐私：文件永远不会离开用户的设备。
• 成本：服务器费用是固定的——无论是 10 位用户还是 10 000 位，我都不需要为 CPU 处理时间付费。

2. 为什么选 Vanilla JS？（不使用 React，也不使用 Vue） 🍦

我知道，我知道。已经是 2025 年了，为什么不使用 Next.js？

对于这种工具来说，性能就是特性。我不想仅仅为了渲染一个 “合并 PDF” 按钮就加载 200 KB 的水合脚本。

3. 我的 “混合” 构建工作流

我没有使用笨重的 JS 框架，而是采用 Python 作为静态站点生成器：

• 用纯 Vanilla JS 编写逻辑。
• 使用 Python + Jinja2 模板为每个工具生成 HTML 页面（SEO 至关重要）。
• Python 脚本将所有内容编译成一个可部署的静态文件夹。

结果

• Lighthouse 分数：100/100 🟢
• 加载时间：瞬间完成。

4. 部署：Vercel（零配置） ▲

由于整个应用完全在客户端运行，没有后端数据库，我不想管理服务器、SSH 密钥或 Docker 容器。于是我选择 Vercel 进行部署，因为它符合我的 “懒人开发者” 哲学：

• Git 集成：将生成的静态文件推送到 GitHub，Vercel 自动检测变更并部署。
• 全球 CDN：静态资源（JS/WASM）在边缘缓存，使工具在全球范围内瞬时加载。
• 成本：免费。处理过程不使用 Serverless Functions，所以我轻松保持在免费额度内。

这就是终极的 “部署即忘记” 设置。

5. 结果：DuneTools 🏜️

项目已经上线，包含以下功能：

• PDF 工具：合并、拆分、压缩。
• 视频：转换器、GIF 制作。
• 图片：压缩、尺寸调整。

它快速、免费，最重要的是 私密。

欢迎大家审阅我的代码或对用户体验提出反馈。

👉 立即尝试： DuneTools.com

(P.S. 如果你是 Indie Hacker，想要一个以隐私为先的 iLovePDF 替代方案，我为你打造了它！)