SvelteKit 构建优化：如何排除 public 目录

问题背景

在 Svelte 3 项目中，开发者通常使用 Vite 构建工具进行项目打包。通过配置 vite.config.js 文件，可以灵活控制构建行为，例如在开发模式下包含 public 目录，而在生产构建时排除该目录。这种优化对于包含大量静态资源（如图片、视频等）的项目尤为重要，可以显著减少构建输出体积。

Svelte 3 的解决方案

在传统的 Svelte 3 项目中，开发者可以通过以下 Vite 配置实现 public 目录的排除：

export default defineConfig(({ command }) => ({
  // ...其他配置
  publicDir: command === "serve" ? "public" : false
}));

这种配置方式简单直接，当运行开发服务器时 (npm run dev)，Vite 会包含 public 目录；而在生产构建时 (npm run build)，则会完全排除 public 目录，从而减小构建输出体积。

SvelteKit 的差异与挑战

迁移到 SvelteKit 后，开发者会发现原有的配置方式不再适用。SvelteKit 对 Vite 配置进行了封装和覆盖，直接修改 vite.config.js 中的 publicDir 会导致错误提示：

[vite] Unexpected option config.kit.publicDir
[vite] server restart failed

这是因为 SvelteKit 通过自己的配置系统管理这些选项，需要采用不同的方式来实现相同的优化目标。

SvelteKit 的解决方案

在 SvelteKit 中，正确的配置方式是通过修改 svelte.config.js 文件：

export default {
  kit: {
    files: {
      assets: process.argv.includes('dev') ? "public" : ""
    }
  }
};

同时，需要确保 package.json 中的开发脚本正确指定了 dev 命令：

{
  "scripts": {
    "dev": "vite dev"
  }
}

这种配置实现了与 Svelte 3 相同的效果：在开发模式下包含 public 目录，在生产构建时排除该目录。

实现原理分析

1. process.argv 检测：通过检查命令行参数是否包含 'dev' 来判断当前运行模式
2. 条件赋值：开发模式下指定 public 目录路径，生产模式下置空
3. SvelteKit 集成：利用 SvelteKit 的配置系统而非直接修改 Vite 配置

最佳实践建议

1. 大型静态资源管理：对于特别大的静态资源，考虑使用 CDN 而非项目打包
2. 构建监控：定期检查构建输出体积，确保优化效果
3. 环境变量替代：对于更复杂的需求，可以使用环境变量而非 process.argv 检测
4. 版本兼容性：注意不同 SvelteKit 版本间的配置差异

总结

从 Svelte 3 迁移到 SvelteKit 时，构建配置需要相应调整。通过合理配置 svelte.config.js 文件，开发者仍然可以实现 public 目录的按需包含，从而优化构建过程和输出结果。这种优化对于包含大量静态资源的项目尤为重要，可以显著提升开发效率和部署性能。