打包概念：摇树优化与代码拆分
了解打包器如何通过摇树优化移除未使用的导出，并将输出拆分为多个代码块以加快初始页面加载。
打包概念：摇树优化与代码拆分 是 CoddyKit 上的免费 Frontend Academy 课时。 这是第 4 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Frontend Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Frontend Academy 课程共包含 4 节课。
打包工具的作用是什么？
打包工具（Vite、webpack、Rollup、Parcel）会读取源文件，解析导入内容，转换代码（转译、压缩、优化），并输出浏览器可以高效加载的文件。
模块图
打包工具从入口点开始，跟踪每个导入内容以构建模块图——也就是应用所使用全部代码的完整映射。所有优化都以此模块图为基础。
树摇——消除无用代码
树摇会分析模块图，并移除从未被导入的导出内容。只有 ES 模块的静态导入支持树摇；CommonJS 的 require() 是动态的，无法进行静态分析。
// utils.js
export const add = (a, b) => a + b; // used → included
export const multiply = (a, b) => a * b; // never imported → removed
// app.js
import { add } from './utils.js';
console.log(add(2, 3));副作用与 sideEffects: false
如果您的库没有副作用（只有纯导出重导出），请将 "sideEffects": false 添加到 package.json 中。这会告诉打包工具：可以安全地移除软件包中任何未被导入的文件。
// package.json of a library:
{
"sideEffects": false
// or list files with side effects:
"sideEffects": ["./src/polyfills.js"]
}代码分割
代码分割会将构建包拆分为多个按需加载的代码块。主代码块保持较小，以实现快速的初始加载。次要代码块只会在需要时加载（例如延迟路由和功能开关）。
入口点分割
多页面应用有多个入口点，每个入口点都会生成自己的构建包。共享代码（例如 React）会自动提取到共享代码块中。
动态导入分割
每次动态调用 import() 都会创建一个分割点。打包工具会为延迟加载的模块及其所有独有依赖生成单独的代码块。
// vite / rollup automatically creates a separate chunk:
const Admin = lazy(() => import('./Admin'));
const Reports = lazy(() => import('./Reports'));供应商代码块
Node_modules 中的代码很少发生变化。请将它提取到具有较长缓存 TTL 的供应商代码块中。已经缓存供应商代码块的用户在应用更新时只需重新下载应用代码块。
// vite.config.ts
build: {
rollupOptions: {
output: {
manualChunks: { vendor: ['react', 'react-dom'] }
}
}
}压缩
压缩工具（esbuild、terser）会移除空白，将变量重命名为单个字母，并应用其他缩减处理。一个典型的 React 应用在压缩后会缩小 60%–70%。
基于内容的哈希
打包工具会将文件内容的哈希值添加到文件名中：index-a1b2c3.js。内容发生变化时，哈希值和文件名都会变化，浏览器便会获取新文件。未发生变化的代码块可以无限期缓存。
源代码映射
源代码映射可以将压缩后的输出映射回原始源代码。它们会单独生成（不会发送给用户），并由 DevTools 用于调试。请使用 build.sourcemap: true 启用。
快速检查
树摇要正常工作，首要条件是什么？
回顾：打包概念
打包工具会解析模块图，树摇未使用的导出内容（需要静态 ESM），将代码拆分为用于延迟加载的代码块，提取供应商代码以便缓存，压缩输出，并添加内容哈希以破坏缓存。源代码映射可以帮助调试压缩后的代码。
常见问题解答
「打包概念：摇树优化与代码拆分」课时是免费的吗？
是的 — 「打包概念：摇树优化与代码拆分」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Frontend Academy 课程的其余内容，请升级到 CoddyKit PRO。 Frontend Academy 课程共包含 4 节课。
「打包概念：摇树优化与代码拆分」这节课中我会学到什么？
了解打包器如何通过摇树优化移除未使用的导出，并将输出拆分为多个代码块以加快初始页面加载。 你通过在浏览器中直接运行的动手代码来练习 Frontend Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 Frontend Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 Frontend Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 4 节课，共 4 节。
「打包概念：摇树优化与代码拆分」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 Frontend Academy 课中编写并运行代码吗？
能。每节 Frontend Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。