vue.js自定义组件库按需导入需esm+无副作用导出，依赖package.json的"module"和"sideeffects"字段、独立组件导出、显式导入或unplugin-vue-components自动导入，配合插件化注册与规避require/动态import等陷阱。
Vue.js 实现自定义组件库的按需导入，核心在于让构建工具（如 Vite 或 Webpack）能识别并剔除未使用的模块，同时保持开发体验简洁。这不是单纯“少引几个文件”，而是依赖模块结构、导出方式和构建配置三者协同。
组件库必须支持 ESM + 无副作用导出
这是按需导入能生效的前提。你的组件库 package.json 至少要包含：
- "module" 字段指向 ES 模块入口（如 dist/index.mjs）
- "sideEffects" 字段明确声明哪些文件有副作用（通常是样式文件），其余文件可安全摇树（tree-shaking）。例如：
-
"sideEffects": ["*.css", "*.scss"]—— 告诉打包器：只保留被实际 import 的 CSS，其他 JS 文件没用就删掉 - 每个组件应独立导出，默认导出组件本身，命名导出其类型或工具函数（如
export { default as Button } from './Button.vue'）
应用端两种主流接入方式
根据项目规模和维护习惯选择：
Wjs Uploading Video
下载
将一个或多个视频上传至YouTube。当用户想“上传到YouTube”“发YouTube”“批量上传”“upload to YouTube”“post videos to YouTube”或发布到YouTube时使用此技能。
-
显式按需导入：在页面或逻辑中直接 import 组件，再注册或使用。适合组件数量可控、复用场景明确的项目。
import { Button, Input } from 'my-ui';export default { components: { Button, Input } }; -
自动导入（推荐中大型项目）：借助
unplugin-vue-components，它扫描<template></template>中的标签名，自动引入对应组件及样式。只需配置解析器（如MyUIResolver），无需手动 import。
插件化注册提升灵活性
如果你希望同时支持全局注册与局部按需，建议按 Vue 插件规范组织组件：
- 每个组件目录含
index.ts，导出标准插件对象（含install(app)方法） - 提供聚合插件（如
MyUIPlugin），内部循环调用各子插件的install - 在 main.ts 中可二选一：
app.use(MyUIPlugin)（全量）app.use(ButtonPlugin)（单个）
避免常见陷阱
很多按需导入失效，其实卡在细节：
- 组件内用了
require或非静态 import（如拼接字符串路径），会阻断 tree-shaking - 样式未通过
import显式引入（尤其 scoped 样式），可能漏加载 - Vite 项目误配了
optimizeDeps.include，强制预构建整个库，绕过了按需逻辑 - 组件库构建时未启用
rollup的treeshake: true，导致输出包仍含冗余代码
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
