本文由团队成员若木撰写，已授权涂鸦后端独家使用，包括但不限于编辑、标注原创等权益。
背景
最近群里有基于基础组件（如：antd）进行二次打包的需求。 这三天，看到群里同事讨论如何按需打包组件库进行二次打包？ 看到这里，我心里开始嘀咕起来。 由于之前做过基于基础组件库的组件库的二次封装，所以从来没有想过这个地方。 想了想，大概原因如下：
基于基础组件库的封装做了以下几件事：
2.基于第1点，虽然我们也可以仔细想想，但是代码量不会太多，包也不会太大
终于给自己找到了一个比较合理的理由了，哈哈。 既然有人这么认为，那我们就一起探讨一下吧。
组件库如何实现按需加载
我不知道，我不知道，但至少我用过。 去著名的UI组件库Antd官网查看组件按需加载的使用方法：
不好意思，和我印象中的怎么不一样，不过仔细看antd文档还是很清楚的，我们也找一下之前版本3.x的文档来个大对比
看看对比是不是很清醒：
Antd4.X版本是借助基于ESmodules treeshaking的webpack按需加载的。
Antd3.X版本使用babel插件babel-plugin-import导出UI组件模块的变更，实现按需加载：
注意前方高能，瓜来了，来了，仔细看下面两张图：
第二张图来自 babel-plugin-importGitHub。 在插件的默认配置下webpack基于，应该从 lib 导入包。 做到严谨、严谨。 这不是重点，不是重点。 你可以自己娱乐，自己判断。
按需加载的原理是什么
里面说了很多话，虽然没有说到重点，但是确实如此。 如果你想理解它，你必须认识到三件事：
第一件：Webpack
后端项目打包，目前主流应该是Webpack（最近Vite势头强劲，开发体验确实不错webpack基于，有兴趣的话可以尝试一下），先了解Webpack的打包原理，一定要去到经典图片：
根据入口文件，递归查询相关依赖，然后通过各种加载器和各种插件，最终打包成一个bundle文件或几个bundle文件（代码分段）。
虽然这不是重点，但如今的 NPM 包通常以两种格式导出包：CommonJs 和 ESmodules。 那么问题来了，Webpack如何知道加载哪种格式的依赖包呢？ 进入Webpack官网，搜索文档。 我找不到任何相关点。 万能的互联网上，有人提到Webpack是按照这个规则加载对应的包的。 的：
就是这样。 首先点击这里。 如果你不明白也没关系。
第二块：NPM 或 package.json
虽然上面的过程仍然存在问题，但是Webpack如何知道是否存在ESmodule或CommonJSmodule，虽然是通过组件库package.json中的相关数组来确定的：
（先插个小插曲，module数组并不是npm定义的数组，最早是rollup提出来的，渐渐的webpack也在用它，仔细看的话会发现package.json有相当多的自定义数组，可能由其他工具提供）
这样，Webpack 就知道如何工作了。
第三块：UI组件库打包输出什么？
不知道，没关系，看看大名鼎鼎的Antd，输出是什么？
是不是清醒了，不懂？ ？ ？ ，那么我就从ESmodule和CommonJSmodule两个角度来串起来：
Treeshaking的原理这里就不啰嗦了。 不知道的可以自己查一下，注意相关配置。 如果坐姿不正确，可能达不到你想要的疗效。
总结
亲爱的评委们，不知道你们是否明白了。 还是嫖娼[捂脸][捂脸][捂脸]。 这是第一个输出。 谢谢你纠正我。 如果您有任何疑问，欢迎讨论和交流。
测试demo地址及补充说明：
主分支支持创建es、lib(commonjs)包输出。 当有es和lib创建输出包时，treeshaking测试才会生效，babel插件按需加载不会生效。
es分支仅支持建立es包输出，treeshaking按需加载测试生效。
lib分支仅支持建立lib(commonjs)包输出，使用babel插件按需加载测试生效。
niu-ui（乞丐版）是测试UI包，examples是验证用例，验证通过webpack-bundle-analyzer、npmlink、npmlinkniu-ui实现
花絮，我那边写文章的时候一开始是用antd直接验证的，后来发现演示不是很直观。 我曾经自己实现过一个简单的UI库。 为了达到和antd一样的构建和打包效果，还有如果你对打包和构建感兴趣的话，我会在后面添加相关的文章。
最后，我给大家留下一个问题。 细心的童鞋，你可能还会发现Antd输出的包es和lib是在组件维度上分开输出的。 是有必要还是什么？ 欢迎大家留言讨论，嘿嘿，就这样结束了。
