Weight problem compiling with WebPack

I did a article on Medium (I'm going to copy-paste here) about the bundle in production, although it was not clear to me if in bundle you are going to add react or not. What I do to save, is the following:

Before applying it, it is necessary to install the plugins for babel

$ npm -i -D babel-plugins-transform-react-inline-elements babel-plugins-transform-react-constant-elements

that should only be used in production, then modify your webpack.config.js so you can use the $NODE_ENV=production , the file that I use is very similar to this

var webpack = require('webpack')
//En lugar de usar un archivo .babelrc, agregamos la configuración de babelQuery aquí
var babelQuery = {presets: ["react", "es2015"], plugins:[]};
var webpackConfig = {
  entry: './app/mainEntry.js',
  output: {
    path: "./public",
    filename: 'bundle.js'
  },
  module: {
      loaders:[
        {
          test: /\.js$/,
        exclude: /node_modules/,
        loader:"babel",
        //BORRAME: Agregamos la babelQuery 
        query: babelQuery
      }
      ]
  },
  resolve: {
    extensions: ['', '.js', '.jsx']
  }
}
if (process.env.NODE_ENV === 'production') {
  //El SourceMap más simple que se puede hacer, sin columnas de mapeo, sino simple líneas
  webpackConfig.devtool = 'cheap-module-source-map'
  // Este plugin es para que todos los módulos de node_modules se lean con la variable NODE_ENV = production
  // y no manden las alertas de desarrollo
  webpackConfig.plugins.push(new webpack.DefinePlugin({
    'process.env': {
      'NODE_ENV': JSON.stringify(process.env.NODE_ENV)
    }
  })
  );
  //Ignoramos ayudas para IE8
  webpackConfig.plugins.push(new webpack.optimize.UglifyJsPlugin({
    compress: {
      screw_ie8: true
    }
  })
  );
  /*
  transform-react-inline-elements
  Esto sólo es necesario si utilizamos la forma
  class App extends React.Component {
    render() {
      return (
        <h1>Soy App </h1>
      )
    }
  }
  Ya que hace una versión optimizada del código mucho mejor que React.createClass
  transform-react-constant-elements
  Reduce los llamados a React.createElement, evita repeticiones
  */
  babelQuery.plugins.push("transform-react-inline-elements","transform-react-constant-elements");
}
module.exports = webpackConfig

If you use babel for other things (as in my case I use it with Express) then you have to remove all the babelQuery from the code above and use the following line in your file .babelrc :

... ,
  "env": {
    "production": {
      "plugins": ["transform-react-constant-elements","transform-react-inline-elements"]
    }
  }

To finish you have to run like @Guz you have to run webpack with -p so react remove all development alerts

$ NODE_ENV=production; webpack -p 

If by pure chance you use fish-shell like me, then

$ set -x NODE_ENV production; webpack -p

With the App that I am currently doing with Redux, React-Router and React my development bundle weighs 1.19 MB but with the configuration above it is reduced to 288 KB I hope this applies and solves your problem.

That's nothing, my bundle of my application made in Vue.js weighs 2.6MB and with source maps, but in development. There are several reasons why the bundle size increases, but mainly due to dependencies . For example, the package babel-standalone has a weight of + 2MB , lodash more than 600KB and react around 600KB . If you add this, you have more than 3MB in dependencies.

Webpack

It is important that you generate your bundles for production and not for development. You can do this by defining a Webpack plugin:

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

Now run webpack:

webpack -p

And you will get a bundle of much less weight.

Gzip

Generally, in the static production, tablets are sent using Gzip. For example, if you compress lodash you will get a much smaller weight:

gz lodash.js
Original: 504040 bytes
Gzipped: 89746 bytes (17.81%)

Generating a bundle for production and use Gzip on your server, you will achieve great improvements regarding the weight of your bundle and thus, a faster response from the server.