如何制作像 lodash & date/fns 这样的 cherry picking react 组件库

Question

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

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

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

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

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

我已经阅读了 tree shaking 和 event 的概念，试图在 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

您可能需要单独打包。

例如Material-UI，它有很多部分。当我们正常使用的时候

npm install @material-ui/core

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

例如@material-ui/corepacakge.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",

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

嗯，这就是范围。

Answer 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'
...

查看 rollup 的文档：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'

如何制作像 lodash & date/fns 这样的 cherry picking react 组件库

How to make cherry picking react component library like lodash & date/fns

reactjs

npm

webpack

package

publish