React.js app.js file size

Question

I created pretty simple react application containing 7 pages and 13 components. I am using gulp to compile it, browserify for dependencies, all files are minimized.

My build'ed app.js file has 1.1 MB. I think it is quite big.

What can I do to reduce its size ? Are there any good practices to achieve smallest size ?

EDIT:

My source code without dependencies is 91 KB.

Answer 1

Using webpack-uglify and disabling source maps can greatly improve the output to a reasonable size (~140kbs for a hello world application)

A couple of steps:

Setting devtool in webpack config to cheap-source-map or cheap-module-source-map so the source maps are not bundled with the output:

{
  eval: 'cheap-source-map'
}

Activate uglify plugin or call webpack with -p argument

plugins: [
  new webpack.optimize.UglifyJsPlugin({
    compress: {
      warnings: false
    }
  })
]

Defining node environment for production causes webpack to remove test helpers and optimize the ouput size:

plugins: [
  new webpack.DefinePlugin({
    'process.env': {
      'NODE_ENV': JSON.stringify('production')
    },
  })
]

Note: these steps should be only used for production builds as they increase the build time.

Resource: https://medium.com/modus-create-front-end-development/optimizing-webpack-production-build-for-react-es6-apps-a637e5692aea#.bug2p64de