Webpack Code Splitting: Does it do anything? Seems like no effect

Question

new to webpack and react here. I followed this medium article to create code splitting in react router. It seems like it has no effect though because my app still has to load the whole bundle.js file synchronously on the initial page load. Any tips for reducing this load time? bundle.js is 2.2mb in dev but prod is about 400kb at the moment after uglifying it.

Simulating a regular 3G connection on network tab

router.js

export default [
  {
    path: '/',
    component: App,
    childRoutes: [
      {
        path: 'signup',
        getComponent(location, cb) {
          System.import('./modules/App/components/Authentication/Login.js')
            .then(loadRoute(cb))
            .catch(errorLoading);
        }
      }
    ]
  }  
]

Answer 1

Try these plugins to reduce your duplicate codes

plugins: [
        new webpack.optimize.DedupePlugin(),
        new webpack.optimize.UglifyJsPlugin()
    ],

Deduce plugin will find duplicate files and codes and merge them into single unit. Uglify plugin will uglify your code in production.

Answer 2

So I went through the webpack docs and used several plugins. Managed to get the file sizes down

from 2.2mb to 92kb and speed up the loading times by 10x.

Here is my webpack.config file now.

module.exports = {
  entry: {
    js: [ './src/index.js' ],
    vendor: [
      'react', 'react-router', 'react-redux', 'toastr', 'lodash'
    ]
  },

  output: {
    path: path.join(__dirname, '/dist/prod'),
    publicPath: '/dist/prod',
    filename: 'bundle.js'
  }, 

  plugins: [ 
      new webpack.optimize.CommonsChunkPlugin({
        name: 'vendor',
        filename: 'vendor.js',
        minChunks: Infinity,
      }),
      new ExtractTextPlugin("styles.css"),
      new webpack.optimize.DedupePlugin(),
      new CompressionPlugin({
          asset: "[path].gz[query]",
          algorithm: "gzip",
          test: /\.js$|\.html$/,
          threshold: 10240,
          minRatio: 0.8
      }),
      new webpack.optimize.UglifyJsPlugin(), 
    ],

  module: {
    rules: ...
  }
}

EDIT: After moving fonts from google to local fonts folder, removing duplicate font calls from libraries like simple-grid and using @font-face, managed to really cut down the load times.

Now 5.5s on regular 3G compared to 27s before. 80+% reduction in load-times.