How to reduce redux-form's bundle size?

For convenience, Redux Form exposes its full API on the top-level redux-form import. However, this causes the entire Redux Form library and its dependencies to be included in client bundles that include code that imports from the top-level import.

You can import directly from those to avoid pulling in unused modules.

Example:

import { reduxForm, Field, FieldArray } from 'redux-form'

use:

import reduxForm from 'redux-form/reduxForm'
import Field from 'redux-form/Field'
import FieldArray from 'redux-form/FieldArray'
import actions from 'redux-form/actions'

Note: if you are using a bundler that can process ES modules like webpack@2 or rollup, it will actually import from redux-form/es because of the "modules.root": "./es" entry in redux-form/package.json, and you will need to make sure you have a rule to transpile those modules if building for legacy browsers.

The public API available in this manner is defined as the set of imports available from the top-level redux-form module. Anything not available through the top-level redux-form module is a private API, and is subject to change without notice.

Babel Plugin

Thankfully there is a babel plugin that can automate this task.

babel-plugin-transform-imports

{
  "plugins": [
    [
      "transform-imports",
      {
        "redux-form": {
          "transform": "redux-form/${member}",
          "preventFullImport": true
        }
      }
    ]
  ]
}

Caveat (Action Creators)

Action creators are available under actions in order to take advantage of this method. One would import the actions binding and then extract the needed action creators.

Example:

import actions from 'redux-form/actions'

const { change, destroy } = actions