部署到 CloudFlare 后出现 JS 语法错误

Question

我有一个使用 Svelte (4.2.10) + Vite (5.1.1) + TypeScript (5.2.2) 构建的静态网站。

当我通过在本地运行

vite

来运行开发前端时，它运行良好并且渲染没有任何问题。当我使用

vite build

构建网站并使用

miniserve

为 dist 静态目录提供服务时，它也呈现完全正常。

但是，当我在 Cloudflare 上部署网站并打开部署的网站时，浏览器会抱怨语法错误并且不会呈现。

我在 https://gitlab.com/hykilpikonna/vite-reproducible-bug 创建了一个最小的可重现示例。重现此行为所需的唯一依赖项似乎是

core-js

。有缺陷的版本可以在 https://test0213.hydev.org/ 访问 - 此页面应显示“1,2,3,4,5”，但在控制台中显示语法错误。

此错误的一些属性：

• 当我部署到没有域的 Cloudflare 页面时，它无法重现（即 https://vite-reproducible-bug.pages.dev/ 按预期工作）
• 使用Nginx本地部署时无法重现。
• 它不会立即显示。仅当开发者控制台打开时刷新页面后才会出现。然而，bug出现后，刷新页面并不能修复它。
• 我尝试了不同的浏览器和干净的配置文件，它们都显示了此行为，因此它不可能是由我的浏览器扩展引起的。

从头开始复制此错误的步骤：

1. 使用

   npm create vite@latest

创建一个 vite svelte 项目
2. 安装

   core-js

   ，导入并在代码中使用它
3. 将其部署到 CloudFlare 页面（我使用了 GitHub 和 GitLab 集成）
4. 为 CloudFlare 页面设置 CloudFlare 域 URL。

Answer 1

Cloudflare 自动缩小功能将

1 .toString

变成

1.toString

，打破了语法。至少从 2022 年起，这就是一个已知的错误。鉴于您已经按照最佳实践缩小了资产，您应该关闭冗余层；它只会减慢速度并破坏东西。 可以在 Cloudflare 仪表板的网站 > [您的网站] > 速度 > 优化 > 内容优化 > 自动缩小 > JavaScript 中找到该设置。