Vue Academy · 课时

树摇与自动导入

Q: 「树摇与自动导入」这节课中我会学到什么？

用于树摇的具名导出、unplugin-vue-components 集成，以及解析器配置 你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

用于树摇的具名导出、unplugin-vue-components 集成，以及解析器配置

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

什么是摇树优化

摇树优化就是消除无用代码：打包工具会删除使用者从未导入的导出内容。构建良好的库可以让应用只包含实际使用的组件，从而保持包体积较小。

命名导出支持摇树优化

请从入口使用命名导出，使每个导入都能进行静态分析。包含所有内容的单一默认导出（聚合对象）无法进行摇树优化。

// GOOD: named exports
export { MyButton } from "./MyButton.vue";
export { MyCard } from "./MyCard.vue";

避免使用默认聚合对象

导出一个包含所有组件的对象会迫使打包工具保留全部组件，即使应用只使用其中一个。

// BAD: defeats tree-shaking
export default { MyButton, MyCard, MyTable };

使用者按需导入

使用命名导出时，使用者只解构出实际使用的组件，其余内容会从构建结果中删除。

import { MyButton } from "my-ui-lib";
// MyCard, MyTable are never bundled

sideEffects 字段

打包工具默认认为模块可能有副作用，因此会保留它们。在 package.json 中设置 "sideEffects": false，即可告诉打包工具您的模块是纯模块，可以安全地删除。

{
  "sideEffects": false
}

声明 CSS 副作用

如果软件包包含不得删除的 CSS 导入，请将它们列出，以便只保留这些导入。

{
  "sideEffects": ["**/*.css"]
}

为使用者提供自动导入

为了免去使用者手动导入的麻烦，库会为 unplugin-vue-components 提供解析器，自动导入模板中使用的组件。

npm install -D unplugin-vue-components

提供解析器

解析器是一个函数，接收使用中的组件名称，并返回其导入来源。请从您的软件包中提供这样的解析器。

// my-ui-lib/resolver.js
export function MyUiResolver() {
  return {
    type: "component",
    resolve: (name) => {
      if (name.startsWith("My")) {
        return { name, from: "my-ui-lib" };
      }
    }
  };
}

使用者配置

使用者使用您的解析器注册插件。这样，模板中使用的组件会自动导入，同时仍可进行摇树优化。

// consumer vite.config.ts
import Components from "unplugin-vue-components/vite";
import { MyUiResolver } from "my-ui-lib/resolver";

export default defineConfig({
  plugins: [
    vue(),
    Components({ resolvers: [MyUiResolver()] })
  ]
});

自动导入与摇树优化

由于解析器会将模板使用转换为真正的命名导入，因此只会打包使用到的组件；这样既保留了使用便利性，也能保持包体积较小。

避免全局注册

通过 app.use 自动注册所有组件的库会破坏摇树优化。请优先使用命名导出和可选解析器，让使用者按需选择每个组件。

快速检查

哪个 package.json 设置会告诉打包工具您的模块可以安全地进行摇树优化？

回顾

通过使用命名导出（绝不要使用默认聚合对象）并设置 "sideEffects": false（或列出 CSS）来启用摇树优化。为了提升使用便利性，请提供 unplugin-vue-components 解析器，让使用者自动导入所用组件，同时仍只打包实际使用的内容，并避免强制进行全局注册。

常见问题解答

「树摇与自动导入」课时是免费的吗？

是的 — 「树摇与自动导入」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Vue Academy 课程的其余内容，请升级到 CoddyKit PRO。 Vue Academy 课程共包含 4 节课。

「树摇与自动导入」这节课中我会学到什么？

用于树摇的具名导出、unplugin-vue-components 集成，以及解析器配置你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Vue Academy 需要有经验吗？

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

「树摇与自动导入」课时需要多长时间？

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

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

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

此课程中的所有课时

← 返回 Vue Academy