按需引入

按需引入可以显著减小打包体积，提升应用性能。

手动按需引入

手动导入需要的组件：

<template>
  <sb-stat-card
    title="总销售额"
    :value="12345"
    trend="+12.5%"
    trend-type="up"
  />
</template>

<script setup lang="ts">
import { StatCard as SbStatCard } from '@simple-blue/components';
</script>

自动按需引入（推荐）

使用 unplugin-vue-components 实现自动按需引入。

安装

npm install -D unplugin-vue-components unplugin-auto-import

Vite 配置

在 vite.config.ts 中配置：

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import AutoImport from 'unplugin-auto-import/vite';
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers';

export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [
        AntDesignVueResolver({
          importStyle: false,
        }),
      ],
      dts: 'src/components.d.ts',
    }),
    AutoImport({
      imports: ['vue', 'vue-router'],
      dts: 'src/auto-imports.d.ts',
    }),
  ],
});

使用

配置完成后，可以直接使用组件，无需手动导入：

<template>
  <sb-stat-card
    title="总销售额"
    :value="12345"
  />
</template>

<script setup lang="ts">
// 无需导入，自动识别
</script>

Tree Shaking

如果你使用现代打包工具（如 Vite、Webpack 5），它们会自动进行 Tree Shaking，移除未使用的代码。

确保在 package.json 中设置了 sideEffects：

{
  "sideEffects": [
    "*.css",
    "*.less"
  ]
}

样式按需引入

使用 unplugin-vue-components 时，样式会自动按需引入，无需额外配置。

如果手动按需引入，需要手动引入对应的样式：

import { StatCard } from '@simple-blue/components';
import '@simple-blue/components/es/stat-card/style';

下一步

• 快速开始 - 开始使用组件库
• 主题定制 - 学习如何定制主题