reactjs - 如何使 cherry-pick react 组件库，如 lodash 和日期/fns

Question

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

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

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

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

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

我已经阅读了 tree shaking 的概念，并且尝试在 webpack 中实现事件，甚至使用汇总，但它们只制作 bundle.js，但不符合我的要求。

我愿意像 import/export 一样实现 cherry-pick 。与 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

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

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

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

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

查看汇总的文档: https://rollupjs.org/guide/en/#input

输出 设置为目录:

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

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

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

然后可以导入库的模块:

import { Theme, Badge } from 'your-component-library'