Skip to content

Instantly share code, notes, and snippets.

@matt-mcdaniel
Last active December 15, 2016 22:04
Show Gist options
  • Save matt-mcdaniel/a5556170f70f7173d62e75c7754a9a13 to your computer and use it in GitHub Desktop.
Save matt-mcdaniel/a5556170f70f7173d62e75c7754a9a13 to your computer and use it in GitHub Desktop.

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment