如何制作樱桃采摘反应成分库，如lodash和date / fns

Question

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

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

但是当我在首页[App.js]上写该语句时。

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

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

[我已经阅读了摇树的概念，并且尝试在webpack中甚至在汇总时尝试实现事件，但是它们仅生成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

您可能需要单独包装。

例如Material-UI，其中有很多部分。当我们以常规方式使用它时

npm install @material-ui/core

如果查看他们的source，您会发现有多个软件包，每个软件包都有自己的package.json文件

例如@ material-ui / core pacakge.json

{
  "name": "@material-ui/core",
  "version": "4.9.7",
  "private": false,
  "author": "Material-UI Team",
  ...
  "dependencies": {
    "@babel/runtime": "^7.4.4",
    "@material-ui/styles": "^4.9.6",
    "@material-ui/system": "^4.9.6",
    "@material-ui/types": "^5.0.0",
    "@material-ui/utils": "^4.9.6",

这意味着它们实际上是分开的，并且彼此具有依赖性。

嗯，这就是范围。