vite 中实现组件库按需打包需组件库提供分文件导出结构、package.json 配置 exports 字段、用户端使用子路径导入（如 import button from 'my-lib/button'），并可借助 unplugin-vue-components 等插件自动转换命名导入。
在 Vite 中实现组件库的按需打包，核心是让构建工具（Vite）和模块系统（ESM）协同工作，使用户只引入用到的组件，而非整个库。这需要组件库本身支持正确的导出结构，并配合构建配置与用户端的导入方式。
组件库需提供正确的模块化导出
组件库不能只暴露一个默认的 index.js 全量入口，而应组织为“分文件导出 + 入口索引”的结构：
- 每个组件单独导出（如
src/Button/index.ts导出 Button 组件及其样式） - 提供
src/index.ts全量导出（供全量引入使用） - 提供
src/index.ts的按需入口映射（可选），但更推荐用户直接导入子路径 - 在
package.json中声明"exports"字段，明确 ESM 入口和子路径支持
例如：
"exports": {
".": {
"import": "./dist/index.mjs",
"require": "./dist/index.cjs"
},
"./button": {
"import": "./dist/button/index.mjs",
"require": "./dist/button/index.cjs"
},
"./button/style": "./dist/button/style.css"
}
构建时启用 rollupOptions.output.inlineDynamicImports = true（可选）
Vite 默认使用 Rollup 打包组件库。若你用 vite build 构建组件库本身（非应用），需确保输出格式支持细粒度模块：
- 设置
build.lib模式，指定entry和formats: ['es', 'cjs'] - ES 格式天然支持静态分析，是按需加载的基础；CJS 用于兼容 Node 环境
- 无需开启动态导入内联，除非你主动用了
import()；按需打包主要靠静态import路径被 Rollup 静态解析并摇树
用户项目中正确使用子路径导入
按需打包生效的前提，是使用者不写 import { Button } from 'my-lib'（这会触发全量引入），而是：
-
import Button from 'my-lib/button'—— 直接引入组件子模块 -
import 'my-lib/button/style.css'—— 单独引入样式（避免 CSS 全量注入） - 搭配插件（如
unplugin-vue-components或unplugin-auto-import）可进一步自动化，但本质仍是基于子路径导入
此时 Vite/Rollup 能静态识别该依赖仅为 button 模块，自动排除其他组件代码。
进阶：支持自动按需导入（类似 Element Plus）
若想让用户写 import { Button } from 'my-lib' 也能按需，需借助插件转换：
- 在用户项目中配置
unplugin-vue-components/vite，并设置dirs: ['node_modules/my-lib/src'] - 或使用
unplugin-import配置imports: [{ name: 'Button', from: 'my-lib/button' }] - 这些插件会在编译时将命名导入重写为子路径导入，再交由 Vite 打包器处理
注意：这属于开发时转换，不影响组件库本身的发布结构，但要求库源码保留可扫描的目录结构（如 src/button/）。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
