部署SvelteKit到Cloudflare Pages时如何解决workers.api.error.script_too_large错误

问题背景 #

使用SvelteKit+mdsvex开发博客，包含200+嵌入Svelte组件的Markdown文章，部署到Cloudflare Pages时触发错误：

Your Functions script is over the 1 MiB size limit (workers.api.error.script_too_large)

已尝试调整prerender/csr配置、Cloudflare适配器路由排除规则，均未解决问题，怀疑cloudflare/_worker.js因包含所有文章信息导致体积超标。

解决方案 #

1. 强制所有文章页面完全预渲染

不要仅依赖全局配置，在页面/布局层级明确开启预渲染，确保构建时生成静态HTML而非依赖worker运行时处理：

// src/routes/+layout.js
export const prerender = true;
export const csr = false; // 静态页面无需客户端渲染，进一步减少worker负载

构建时查看日志，确认所有文章页面被标记为prerendered，避免动态路由逻辑被打包进worker。

2. 修正Cloudflare适配器路由配置

你之前的配置错误排除了/_worker.js（该文件是Cloudflare自动生成的核心脚本，无法排除），正确做法是将所有静态文章路由排除出worker处理范围：

// svelte.config.js
import adapter from '@sveltejs/adapter-cloudflare';

export default {
  kit: {
    adapter: adapter({
      routes: {
        // 这些路由全量预渲染，不进入worker脚本
        exclude: ['/january/*', '/february/*', '/countdowns/*', '/days/*']
      }
    })
  }
};

注意：如果这些路由是动态生成的（比如从本地目录读取文章列表），需确保SvelteKit在构建时遍历所有路径完成预渲染，而非留到运行时解析。

3. 优化文章组件的打包逻辑

• 对无交互需求的组件，确保预渲染时直接生成静态HTML，避免组件代码被打包进worker；
• 将通用组件抽离到公共目录，确保组件代码只被打包一次，而非每篇文章重复引入。

4. 清理不必要的运行时逻辑

• 检查是否有在load函数中运行时获取文章数据，改为构建时预加载（比如通过import或fs.readdirSync在+page.server.js中读取内容，配合预渲染）；
• 确认ssr配置为true（默认开启），确保服务器端完成所有组件渲染，不将组件逻辑留在worker中。

5. 无需更换mdsvex

问题根源并非mdsvex本身，而是预渲染配置或worker打包逻辑的疏漏。mdsvex完全支持静态预渲染，只要配置正确，不会导致worker体积超标。

内容的提问来源于stack exchange，提问作者Jeffh30