优化构建流程
生成经过优化的生产版本
优化构建流程 是 CoddyKit 上的免费 Vue Academy 课时。 这是第 1 节课，共 3 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Vue Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Vue Academy 课程共包含 3 节课。
从开发到生产环境
开发期间，您会运行支持热重载的开发服务器。要发布应用，您需要创建经过优化的生产构建：一组针对速度和体积进行优化的静态文件，可随时部署到任意主机。
运行构建
标准命令会为生产环境构建您的应用。Vite（默认的 Vue 3 工具链）会编译、打包并优化所有内容。
npm run build构建产物
构建会将优化后的文件写入 dist 文件夹，其中包括 index.html、带哈希的 JavaScript 和 CSS 捆绑文件，以及您的静态资源。您要部署的就是此文件夹。
dist/
index.html
assets/
index-a1b2c3.js
index-d4e5f6.css代码压缩
代码压缩会移除空白和注释，并缩短变量名，从而让文件下载更快。生产构建会自动压缩 JavaScript 和 CSS。
摇树优化
摇树优化会移除您从未使用的代码。如果您从一个库中导入一个函数，打包器就会删除其余部分。请使用 ES 模块的命名导入，以便摇树优化生效。
// only what you use is bundled
import { debounce } from "lodash-es"内容哈希
构建产物的文件名会包含内容哈希，例如 index-a1b2c3.js。代码发生变化时哈希也会变化，因此浏览器会获取新文件，同时积极缓存未更改的文件。
分析捆绑包大小
要查看捆绑包中包含哪些内容，请使用可视化插件。它会生成一张交互式图表，显示哪些模块占用的空间最多，为优化提供指导。
npm install -D rollup-plugin-visualizer解读分析结果
几乎不用的大型依赖项是危险信号。分析结果可能会显示出一个庞大的日期处理库或图表库，您可以将其替换为更小的替代方案，或改为延迟加载。
环境变量
Vite 会通过 import.meta.env 公开以 VITE_ 为前缀的环境变量。使用它们可以按环境配置接口地址和功能开关。
// .env.production
// VITE_API_URL=https://api.example.com
const apiUrl = import.meta.env.VITE_API_URL按环境构建
Vite 会在执行 npm run build 时加载 .env.production，在执行 npm run dev 时加载 .env.development，因此每个环境都会自动获得正确的配置。
// .env.development -> VITE_API_URL=http://localhost:3000
// .env.production -> VITE_API_URL=https://api.example.com预览构建
部署之前，请在本地运行生产构建的预览，以确认它使用真实的优化文件按预期运行。
npm run build
npm run preview快速检查
检验您对构建流程的掌握情况。
回顾
运行 npm run build，生成包含经过压缩、摇树优化且带内容哈希资源的优化 dist 文件夹。分析捆绑包大小以削减庞大的依赖项，并结合 VITE_ 环境变量和 .env 文件配置不同环境。发布前请先进行预览。接下来您将把这个构建产物部署到托管平台。
常见问题解答
「优化构建流程」课时是免费的吗？
是的 — 「优化构建流程」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Vue Academy 课程的其余内容，请升级到 CoddyKit PRO。 Vue Academy 课程共包含 3 节课。
「优化构建流程」这节课中我会学到什么？
生成经过优化的生产版本 你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 Vue Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 Vue Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 1 节课，共 3 节。
「优化构建流程」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 Vue Academy 课中编写并运行代码吗？
能。每节 Vue Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。