相关疑难解决方法(0)

我制作了一个小型库，其中包含 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';