Code Splitting - dynamic import

App.js

import React, { Component } from 'react';

class App extends Component {
  handleClick = () => {
    import ('./moduleA')
    .then(({
        moduleA
      }) => {
        // Use moduleA
      })
      .catch(err => {
        // Handle failure
      });
  };
  render() {
    return (
      <div>
        <button onClick={this.handleClick}>Load</button>
      </div>
    );
  }
}
export default App;

import.js

//  Dynamic import example
// Before
import { add } from './math';
console.log(add(16, 26));
// After
import("./math").then(math => {
  console.log(math.add(16, 26));
});