Why is my React component library not tree-shakable?

Question

I have a React component library that I’m bundling with rollup. Then I’m consuming that library in an app setup with create-react-app which uses Webpack under the hood. I expect Webpack to tree-shake the component library. After building the app bundle and analyzing it I see that the library has either not been tree-shaken at all or that tree-shaking didn’t work on the library because it is not tree-shakable in the first place. Why is tree-shaking not working? What am I doing wrong?


rollup.config.js (bundler configuration of the React component library)

import babel from 'rollup-plugin-babel'
import commonjs from 'rollup-plugin-commonjs'
import autoExternal from 'rollup-plugin-auto-external'
import resolve from 'rollup-plugin-node-resolve'
import reactSvg from 'rollup-plugin-react-svg'
import url from 'rollup-plugin-url'
import string from 'rollup-plugin-string'
import pureanno from 'rollup-plugin-pure-annotation'

import pkg from './package.json'
const { getSVGOConfig } = require('./scripts/getSVGOConfig')

const MAX_INLINE_FILE_SIZE_KB = 100

export default {
  input: 'src/index.js',
  output: [
    {
      file: pkg.module,
      format: 'es',
    },
  ],
  plugins: [
    autoExternal(),
    babel({
      babelrc: false,
      exclude: 'node_modules/**',
      plugins: [
        'external-helpers',
        'babel-plugin-transform-react-jsx',
        'babel-plugin-transform-class-properties',
        'babel-plugin-transform-object-rest-spread',
        'transform-react-remove-prop-types',
        [
          'babel-plugin-root-import',
          {
            'rootPathSuffix': 'src',
          },
        ],
        'babel-plugin-styled-components',
        'transform-decorators-legacy',
        [
          'ramda',
          {
            'useES': true,
          },
        ],
      ],
    }),
    resolve(),
    commonjs(),
    reactSvg({
      svgo: getSVGOConfig(),
    }),
    url({
      limit: MAX_INLINE_FILE_SIZE_KB * 1024,
      include: ['**/*.woff', '**/*.woff2'],
    }),
    string({
      include: '**/*.css',
    }),
    pureanno({
      includes: ['**/*.js'],
    }),
  ],
  watch: {
    chokidar: false,
  },
}

src/index.js of the React component library

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

App.js (the app consuming the library)

import React from 'react';
import { Theme, Badge } from 'my-react-component-library'

function App() {
  return (
    <Theme>
      <Badge>Hello</Badge>
    </Theme>
  )
}

export default App

package.json of the React component library (relevant parts)

{
  "name": "my-react-component-library",
  "version": "1.1.1",
  "main": "dist/index.js",
  "module": "dist/index.es.js",
  "scripts": {
    ...
    "build": "rollup -c",
  },
  "dependencies": {
    ...
  },
  "peerDependencies": {
    "react": "^15.0.0 || ^16.0.0",
    "react-dom": "^15.0.0 || ^16.0.0"
  },
  "devDependencies": {
    ...
  },
  "sideEffects": false
}

package.json of the app consuming the library (relevant parts)

{
  "name": "my-app",
  "version": "0.1.0",
  "dependencies": {
    "my-react-component-library": "^1.1.1",
    "react": "^16.12.0",
    "react-dom": "^16.12.0"
  },
  "scripts": {
    ...
    "analyze": "source-map-explorer build/static/js/*chunk*.js build/static/js/*chunk*.js.map",
    "build": "react-scripts build",
    "serve": "serve -s build"
  },
  "devDependencies": {
    ...
    "serve": "^11.3.0",
    "source-map-explorer": "^2.2.2"
  }
}

index.es.js (the bundled react component library)

https://gist.github.com/borisdiakur/ae376738955f15fb5079b5acb2ac83ad

Answer 1

I found one possible solution to my problem. It has nothing to do with tree-shaking though. I’m simply splitting the library into several independent chunks by making use of a rather new feature of rollup (I had to upgrade a bunch of dependencies in order for it to work) and providing 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',
    ...

Here is rollup’s documentation for it: https://rollupjs.org/guide/en/#input

The output is set to a directory:

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

Then I declare the entry point in my package.json as follows:

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

In my test app I import the components as if nothing changed:

import React from 'react';
import { Theme, Badge } from 'my-react-component-library'

That seems to work so far, though it’s again not tree-shaking and I would still like to know how to make my component library tree-shakable.

UPDATE:

Turns out tree shaking worked all the time! Here is what was “wrong” with the library:

1. The Icon component imported all icons so that all svg files ended up in the bundle as soon as you used at least one icon or a component that uses an icon.
2. The Theme component inlined a font as a base-64 string into the bundle.

I resolved the first issue by dynamically importing each icon when needed and the second issue by reducing the MAX_INLINE_FILE_SIZE_KB parameter for rollup-plugin-url in order to split out the font and have it loaded as an asset.

So, here is my advice for anybody who like me starts believing that tree-shaking doesn’t work, just because the bundle is ridiculously large: Double-check your bundle analysis report (i.e. using source-map-explorer), look for the big guys and double-check your imports.