方案
-
方案一：最基本的方案就是每个组件单独打包，然后在esm项目中从详细的组件代码文件路径中引入组件，这样弊端就是大大增加了组件库使用者的心智负担（需要熟悉组件库项目结构），业界
Vant便是如此。优化：自己的组件库可以使用
Babel-plugin-import这个工具，说白了就是借助这个babel插件，可以让import { Button } from 'xxx';转成按文件路径引入import Button from 'xxx/lib/button';业界的element-ui采用的就是这种方案，实现按需引入的本质还是组件单独打包。 -
方案二：基于esm的tree-shaking方案，基于esm代码静态编译的特性（代码在编译阶段就能分析依赖），各构建工具（rollup、vite、webpack5实验功能）基本都支持了tree-shaking的功能，作用就是打包时删除无用代码，从而减小产物体积。那么我们的组件库只要是输出产物是esm规范，那么业务代码使用了我们的组件库，并且通过按需引入的方式引入了一些组件，那么我们的项目代码自然在打包时就可以借助构建工具的tree-shaking机制从而筛除无用的组件代码，实现按需引入。
但是，tree-shaking的力度是有限的，什么意思呢，就是说什么样的代码可以被tree-shaking掉这是一个问题，构建工具的作者需要保证项目代码构建时经过tree-shaking后不能影响项目的正常运行，所以基于这个原则，很多可能产生副作用的代码都是不会被tree-shaking掉的。业界的
antD便是采用的这种方案，也就是把组件打包成esm的产物。css文件是稳稳存在副作用的代码，所以不会被tree-shaking掉，这也是为什么antD官方文档对css的按需引入只字不提的原因。 -
方案三：使用monorepo组件库架构，每个组件都单独发包，从根本上每个组件就没有项目耦合性，所以压根不存在无法按需引入的问题。业界无参考。（参考文章二最后）
