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.

Instead, the bindings exported from redux-form are also available in redux-form/lib and redux-form/es. 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/es/reduxForm'
import Field from 'redux-form/es/Field'
import FieldArray from 'redux-form/es/FieldArray'

Use es if you are using a bundler that can process ES modules like webpack@2 or rollup, otherwise use lib.

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/es/${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/es/actions'

const {change, destroy} = actions