React Js - how to keep bundle.min.js small?

Question

I am new to React and javascript dev. I'm used to Java build tools, so now, using NPM, I have a new landscape of build tools to learn. I just enter my project and I noticed that my miniature, ugly package is still ~ 275kb, and I wonder how it can scale for a large application. My source code is only 34kb, but, of course, I need to use all this framework and much more.

So - how can I reduce the size of my application while increasing my application? It's a little difficult for me to keep track of the things I read online, because many people seem to use Grunt, but I just use npm start and npm run build on the package below.

Do I have to manage my requirements () in different ways to prevent duplicate packaging? I don’t know where to start ...

Here is my .json package:

{
  "name": "someapp",
  "version": "0.0.1",
  "description": "foo",
  "repository": "",
  "main": "js/app.js",
  "dependencies": {
    "classnames": "^2.1.3",
    "flux": "^2.0.1",
    "jquery": "^2.2.0",
    "keymirror": "~0.1.0",
    "object-assign": "^1.0.0",
    "react": "^0.12.0"
  },
  "devDependencies": {
    "browserify": "^6.2.0",
    "envify": "^3.0.0",
    "jest-cli": "^0.4.3",
    "reactify": "^0.15.2",
    "uglify-js": "~2.4.15",
    "watchify": "^2.1.1"
  },
  "scripts": {
    "start": "watchify -o js/bundle.js -v -d js/app.js",
    "build": "browserify . -t [envify --NODE_ENV production] | uglifyjs -cm > js/bundle.min.js",
    "test": "jest"
  },
  "author": "Some Guy",
  "browserify": {
    "transform": [
      "reactify",
      "envify"
    ]
  },
  "jest": {
    "rootDir": "./js"
  }
}

Answer 1

I was able to achieve good results with Webpack. I wrote about this in Optimizing Webpack Prod Build for React + ES6 Applications

Here is my webpack configuration:

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

var nodeEnv = process.env.NODE_ENV || 'development';
var isProd = nodeEnv === 'production';

module.exports = {
  devtool: isProd ? 'cheap-module-source-map' : 'eval',
  context: path.join(__dirname, './client'),
  entry: {
    jsx: './index.js',
    html: './index.html',
    vendor: ['react']
  },
  output: {
    path: path.join(__dirname, './static'),
    filename: 'bundle.js',
  },
  module: {
    loaders: [
      {
        test: /\.html$/,
        loader: 'file?name=[name].[ext]'
      },
      {
        test: /\.css$/,
        loaders: [
          'style-loader',
          'css-loader'
        ]
      },
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        loaders: [
          'react-hot',
          'babel-loader'
        ]
      },
    ],
  },
  resolve: {
    extensions: ['', '.js', '.jsx'],
    root: [
      path.resolve('./client')
    ]
  },
  plugins: [
    new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.bundle.js'),
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false
      },
      sourceMap: false
    }),
    new webpack.DefinePlugin({
      'process.env': { NODE_ENV: JSON.stringify(nodeEnv) }
    })
  ],
  devServer: {
    contentBase: './client',
    hot: true
  }
};

Two key points to consider:

devtool: isProd ? 'cheap-module-source-map' : 'eval',

This one will output minimal source cards and will use external files for this, which is suitable for your final package size.

    plugins: [
    new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.bundle.js'),
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false
      },
      sourceMap: false
    }),
    new webpack.DefinePlugin({
      'process.env': { NODE_ENV: JSON.stringify(nodeEnv) }
    })
  ],

Uglify - , , , . process.env React lib.

CommonsChunkPlugin ( ) . , . . , -.

, package.json, webpack:

"scripts": {
    "start": "webpack-dev-server --history-api-fallback --hot --inline --progress --colors --port 3000",
    "build": "NODE_ENV=production webpack --progress --colors"
  },
  "devDependencies": {
    "babel-core": "^6.3.26",
    "babel-loader": "^6.2.0",
    "babel-plugin-transform-runtime": "^6.3.13",
    "babel-preset-es2015": "^6.3.13",
    "babel-preset-react": "^6.3.13",
    "file-loader": "^0.8.4",
    "webpack": "^1.12.2",
    "webpack-dev-server": "^1.12.0",
    "webpack-hot-middleware": "^2.2.0"
  }

: - , Webpack 2 ( -). , .

2: Webpack 2. , Webpack 2. 28%. : Webpack 2