ReactJs simple project js file size is huge

Question

Please view my code here https://github.com/steelx/ReactBasic

Once you run gulp and go to ./public/ folder, you can see main.js its file size is 1.8MB

I need to understand, why its so huge.

Answer 1

To get a trimmed-down production build, you will need to:

1. Set debug to false in your browserify config - you currently have it set to true, so it's generating a sourcemap which accounts for most of the size.
2. Use envify to replace references to process.env.NODE_ENV in the React source with 'production'.
3. Use uglify to minify your code. Step 2 is required to allow the dead code elimination uglify performs to remove chunks of development-only code from the React codebase.

---

Example of expected bundle size using webpack to perform the steps above:

$ npm run build

> @ build /tmp/ReactBasic-master
> webpack

Hash: 8b3519309382e66318ad
Version: webpack 1.12.2
Time: 6486ms
      Asset     Size  Chunks             Chunk Names
    main.js   133 kB       0  [emitted]  main
main.js.map  1.54 MB       0  [emitted]  main
    + 157 hidden modules

$ gzip-size public/main.js
38376

webpack.config.js used for this example:

process.env.NODE_ENV = 'production'

var path = require('path')
var webpack = require('webpack')

module.exports = {
  devtool: 'source-map',
  entry: './jsx/app.jsx',
  output: {
    filename: 'main.js',
    path: path.join(__dirname, 'public')
  },
  resolve: {
    extensions: ['', '.js', '.jsx']
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify('production')
    }),
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        screw_ie8: true,
        warnings: false
      }
    })
  ],
  module: {
    loaders: [
      {test: /\.jsx?$/, loader: 'babel', exclude: /node_modules/}
    ]
  }
}

package.json used for this example:

{
  "scripts": {
    "build": "webpack"
  },
  "dependencies": {
    "react": "0.14.1",
    "react-dom": "0.14.1",

    "babel-core": "5.8.33",
    "babel-loader": "5.3.3",
    "webpack": "1.12.2"
  }
}