如何使 lodash 和 date/fns 等 React 组件库变得精挑细选

Question

我制作了一个小型库，其中包含 20-25 个不同的组件，并为其制作了一个 npm 包。

我想在其中使用这些组件的 React 项目有许多页面[路由]使用延迟加载，因此每个页面都有自己的包。

但是当我在我的主页[App.js]上写下声明时。

    import { MyModal } from 'my-react-lib';

每个组件都被加载到主页包中。所以我的初始加载性能是最差的。[2Mb 初始包大小]

我已经阅读了 Tree Shaking 的概念，并尝试在 Webpack 中实现，甚至使用 Rollup 来实现，但它们只制作了 Bundle.js，但不符合我的要求。

我愿意像进出口一样实现精挑细选。与 date-fns 和 lodash 相同。

      import format from 'date-fns/format';
      import debounce from 'lodash/debounce';

如何实现这一目标？

   import MyModal from 'my-react-lib/MyModal';
   import OtherComponent from 'my-react-lib/OtherComponent';

Answer 1

Rollup 允许您将库分成几个独立的块。您必须提供一个对象，将名称映射到入口点、汇总配置的输入属性。它看起来像这样：

\n\n

input: {\n    index: \'src/index.js\',\n    theme: \'src/Theme\',\n    badge: \'src/components/Badge\',\n    contentCard: \'src/components/ContentCard\',\n    card: \'src/elements/Card\',\n    icon: \'src/elements/Icon\',\n    ...\n

\n\n

src/index.js看起来像这样：

\n\n

export { default as Theme } from \'./Theme\'\nexport { default as Badge } from \'./components/Badge\'\n...\n

\n\n

查看 rollup\xe2\x80\x99s 文档：https ://rollupjs.org/guide/en/#input

\n\n

输出设置为目录：

\n\n

output: [\n  {\n    dir: \'dist/es\',\n    format: \'es\',\n  },\n],\n

\n\n

然后在 package.json 中声明入口点，如下所示：

\n\n

"module": "dist/es/index.js",\n

\n\n

然后可以导入库的模块：

\n\n

"module": "dist/es/index.js",\n

\n