Code-splitting.md

The Optimization Merry-Go-Round

(npm install -g webpack-bundle-analyzer)

1. webpack --profile --json > stats.json

2. webpack-bundle-analyzer stats.json

3. Optimize bundles:

   a. Optimize "vendor" bundle size in webpack config:

    ```
    	entry: {
    		main: './client.js',
    		vendor: [
    			'lodash.get',
    			'lodash.set',
    			'lodash.throttle',
    			'lodash.debounce',
    			'react',
    			'react-dom',
    			'react-dnd',
    			'react-dnd-html5-backend',
    			'redux-thunk',
    			'react-router',
    			'redux',
    			'react-redux',
    			'redux-form'
    		]
    	},
    	...
    ```
   

   b. Optimize "main" bundle through async fetching

    E.g., Async fetching in React Router config
    ```
    function handleError(err) {
    	console.error('Could not dynamically load route chunk', err);
    }
   
    const loadRoute = (callback, authProps) => (module) => {
    	return callback(null, module.default);
    }
   
    const routes = [
    	...
    	{
    		path: 'billing',
    		getComponent: (location, callback) => {
    			System.import('features/billing/containers/BillingContainer')
    				.then(loadRoute(callback))
    				.catch(handleError);
    	}
    	...
    ```
   

4. Repeat