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

user_10778959 0
Viewed 1175

I have made one small library which includes 20-25 different components & made an npm package of it.

my react project, where I want to use these components, has many pages[routes] used lazy-loading so each page has its own bundle.

but when I write the statement on my home page[App.js].

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

each and every component is loaded into home page bundle. so my initial loading performance is worst. [2Mb initial bundle size]

I have read the concept of tree shaking and event tried to implement in webpack & even with rollup but they only make bundle.js but not as per mine requirement.

I am willing to achieve cherry-picking like import-export. same as date-fns & lodash does.

      import format from 'date-fns/format';
      import debounce from 'lodash/debounce';

how to achieve this?

   import MyModal from 'my-react-lib/MyModal';
   import OtherComponent from 'my-react-lib/OtherComponent';
npm webpack reactjs publish package
2 Answers

Rollup allows you to split your library into several independent chunks. You have to provide an object, mapping names to entry points, to the input property of the rollup configuration. It looks like this:

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 looks like this:

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

Have a look at rollup’s documentation: https://rollupjs.org/guide/en/#input

The output is set to a directory:

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

Then you declare the entry point in your package.json as follows:

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

The modules of your library can then be imported:

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

You may need to package them separately.

For example the Material-UI, there are many parts of it. When we use it in the normal way

npm install @material-ui/core

If you look at their source, you would find out that there are multiple packages, each with it's own package.json file

For example the @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",

Which means that they are actually separate and have dependencies with each other.

Well, that's the scope.

user_118722460
Related