rollup 包拆分/代码拆分

Question

我正在开发一个组件库（例如material-ui）。我正在使用 rollup 进行编译。 目前我可以生成一个包，并导入一个组件（例如按钮），我可以这样做：

import { Button } from "package-name";

我可以修改汇总配置来为每个组件生成单独的包或块吗？ 换句话说，我可以将大尺寸包拆分为单独的小尺寸包（每个组件一个） 并以类似于这样的方式使用它们：

import { Button } from "package-name/Button";

我开始寻找代码分割...... 但我想知道是否有已知的最佳实践可以得到这个结果？

rollup.config文件有具体的写法吗？

Answer 1

要为每个组件生成单独的块/输出，您必须提供一组汇总配置（组件的多个入口文件）。然后您可以将这些输出块发布为单独的包。

如果您只想使您的库可进行树摇动，那么单个包也足够了（是的，即使只有单个输出块）。但输出格式必须是

es

而不是

cjs

或

umd

。

与 rollup 捆绑只会使您的库能够进行 tree-shake，但它还取决于您的消费者应用程序在最终构建中对无效代码进行 tree-shake 的能力。