0Pricing
Sveltejs Academy · 课时

构建与预览

运行 vite build 和 vite preview,在本地验证生产构建

构建与预览 是 CoddyKit 上的免费 Sveltejs Academy 课时。 这是第 4 节课,共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Sveltejs Academy 学习路径的一部分,你的进度在网页和 CoddyKit 应用中同步。 Sveltejs Academy 课程共包含 4 节课。

构建命令

请运行构建脚本,生成可用于生产环境的输出。

npm run build

构建的作用

Vite 会打包、树摇和压缩您的代码。SvelteKit 会应用所选的适配器。

本地预览

请使用预览脚本,在本地测试生产构建。

npm run preview

为什么需要预览

预览环境比开发环境更接近生产环境:它提供构建后的代码包,而不是经过 HMR 处理的代码。

构建输出

默认情况下,输出会写入 build/。每个适配器都会自定义其结构。

构建错误

TypeScript 错误和导入问题会在这里显示。请在部署前修复它们。

性能审计

请针对 npm run preview 运行 Lighthouse,以评估实际性能。

代码包分析

请添加 vite-bundle-visualizer 或 rollup-plugin-visualizer,以检查代码包的组成。

环境文件

生产构建默认使用 .env.production;开发环境使用 .env。

源映射

请启用生产环境源映射以监控错误,并在隐私性与可调试性之间进行权衡。

持续集成构建

请在部署前于持续集成环境中运行构建,以便尽早发现问题。

快速检查

npm run preview 的作用是什么?

回顾

请使用 build 进行生产构建,使用 preview 在部署前进行本地的类生产环境测试。

常见问题解答

「构建与预览」课时是免费的吗?

是的 — 「构建与预览」的完整文本可在网页上免费阅读。要进行交互式练习(内置代码编辑器和全天候 AI 导师)并解锁 Sveltejs Academy 课程的其余内容,请升级到 CoddyKit PRO。 Sveltejs Academy 课程共包含 4 节课。

「构建与预览」这节课中我会学到什么?

运行 vite build 和 vite preview,在本地验证生产构建 你通过在浏览器中直接运行的动手代码来练习 Sveltejs Academy,全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Sveltejs Academy 需要有经验吗?

无需任何先前经验。CoddyKit 上的 Sveltejs Academy 课程适合初学者到高级学习者,你可以从这里开始或从头开始,按照自己的节奏学习。 这是第 4 节课,共 4 节。

「构建与预览」课时需要多长时间?

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动,所以你能稳步进步,并在网页和应用中从离开的地方继续。

我能在这节 Sveltejs Academy 课中编写并运行代码吗?

能。每节 Sveltejs Academy 课都包含内置代码编辑器,你可以在浏览器中直接编写并运行真实代码,并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

  1. 用于静态网站的 adapter-static
  2. 用于 Node.js 服务器的 adapter-node
  3. adapter-vercel 与 adapter-cloudflare
  4. 构建与预览
← 返回 Sveltejs Academy