Hey there! Let's break down your question clearly, since you're currently importing and registering Ant Design components individually in multiple files like this:

import Vue from "vue"
import Select from "ant-design-vue/lib/select"
Vue.use(Select)

First off, let's clarify whether your current approach is the best practice, and when full import makes sense.

1. Your current approach: Is it optimal? #

Not quite—right now you're registering the same component multiple times across different files, which creates redundant code and unnecessary work. The proper way to do on-demand import is to centralize the registration, or use a tool to automate it.

Better on-demand setup options: #

Option 1: Centralized registration

Create a dedicated file (like src/plugins/antd.js) to import and register only the components you need once:

// src/plugins/antd.js
import Vue from 'vue';
// Import only the components you actually use
import { Select, Button, Table } from 'ant-design-vue';

Vue.use(Select);
Vue.use(Button);
Vue.use(Table);

Then import this file in your main.js:

import './plugins/antd.js';

This keeps your code clean and avoids duplicate registrations.

Option 2: Automate with babel-plugin-import

If you want even less boilerplate, add the babel-plugin-import to your project. After configuring it, you can directly import components in your files without manual Vue.use()—the plugin automatically pulls in the component code and its corresponding styles:

// In any component file
import { Select } from 'ant-design-vue';
// No need for Vue.use() anymore

The biggest perks of proper on-demand import:

• Smaller bundle size: You only package the components you actually use, which drastically improves load times in production.
• Cleaner code: No repeated import/register code cluttering up your components.

2. When to use full import #

Full import means pulling in the entire Ant Design library in main.js:

import Vue from 'vue';
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';

Vue.use(Antd);

This is great for:

• Rapid prototyping or small projects (like internal tools, demos, or side projects) where you want to skip the setup overhead and just start using components immediately.
• Teams that prioritize development speed over bundle size for short-term projects.

The downside? A much larger bundle, since you're including every Ant Design component even if you don't use them.

3. Final Recommendation #

• Go with optimized on-demand import (centralized or automated) if you're building a medium-to-large project, or if performance/load times are a priority. This is the industry standard best practice for production-grade apps.
• Stick with full import only if you're working on a small project or need to iterate quickly without worrying about bundle size.

Also, a quick fix for your current code: stop registering components in every file—centralize that setup to avoid redundant work!

内容的提问来源于stack exchange，提问作者Дмитрий Фомин