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

on
{
  "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