如何使樱桃采摘反应组件库，如 lodash 和日期/fns

Posted 2023-02-22

【中文标题】如何使樱桃采摘反应组件库，如 lodash 和日期/fns

【英文标题】：How to make cherry picking react component library like lodash & date/fns

【发布时间】：2020-07-05 23:29:28

【问题描述】：

我制作了一个包含 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';

【参考方案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",

这意味着它们实际上是分开的并且相互依赖。

嗯，这就是范围。

【讨论】：

如果我们这样做，每个组件的大小都会大得多，因为每个组件都会有 react 和 react dom 作为它的依赖项。

@NikhilPatil 好吧，在我看来，逐案。至少这是一个现实世界的解决方案，也许在某些特定情况下。

@NikhilPatil Cool，如果您成功了，请发布作为答案。

我找到了最终解决方案，borisdiakur 链接就是答案。 gitlab.com/liquid-design/liquid-design-react

【参考方案2】：

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

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'

【讨论】：

@NikhilPatil 看看这里：gitlab.com/liquid-design/liquid-design-react