import { asyncComponent } from 'react-async-loading';
// And export module...
export default asyncComponent(() => System.import('./Link.js'));

Code splitting to React and Webpack

• Install the module: npm install --save react-async-loading
• Add plugin to you Webpack config:

new webpack.optimize.CommonsChunkPlugin({
  children: true, // necessary for splitting children chunks
  async: true // necessary for async loading chunks
})

• Simple

asyncComponent(() => System.import('./Link.js'), { placeholder: <div>Loading</div> })

or

asyncComponent(() => require.ensure([], (require) => require('./Button.js'), 'Button'), { placeholder: <div>Loading</div> })

Required. There should be a function of the module is loaded. Webpack supports two varieties of modules. SystemJS and require.ensure. The only difference is in the syntax, and that you can specify the name of the chunk in require.ensure

• System.import('./Link.js')
• require.ensure([], (require) => require('./Button.js'), 'Button')

Webpack compiles

• 0.chunk.js - numbers name in SystemJS
• Button.chunk.js - we set the name in require.ensure

Setting options. Now available placeholder option, which displays the item is loaded chunk