Why is my webpack bundle.js and vendor.bundle.js so incredibly big?

Question

All my React projects tend to be incredibly large in file size (bundle.js is 4.87 mb and the vendor.bundle.js is 2,87 mb). I have no idea why it is this large. I already hav

Answer 1

Can you try adding this devtool: 'cheap-module-source-map', in config?

 var config = {
     devtool: 'cheap-module-source-map',
     entry: {
 ....

http://webpack.github.io/docs/configuration.html#devtool

Answer 2

EDIT

I'm not sure if you are on Mac/IOs or Windows, but 2 things I noticed:

1: "deploy": "NODE_ENV=production webpack -p" does not seens correct, you must set the variable when you 're building it for develop and for deploy and here you are not setting it.

2: You have to previously set it on the terminal/comand prompt.

Here goes a example for webpack minify and deploy, you have to adapt a little bit but I hp this should help you.

You have to set first this enviroment variable for node on comand prompt, open it in windows or terminal in mac and:

Mac: export NODE_ENV=production

Windows: set NODE_ENV=production

You can echo in windows or list in mac to check if variable has been added.

Then in your webpack.config.js

    var PROD = process.env.NODE_ENV == 'production';
    var config = {
      entry: {
            app: [
          './src/entry.jsx'
        ],
        vendor: [
          'react',
          'lodash',
          'superagent'
        ],
         output: {
           path: './build',
           filename: PROD ? "bundle.min.js" : "bundle.js"
         },
         plugins: PROD ? [
              new webpack.optimize.UglifyJsPlugin({minimize: true}),
              new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.min.js'),
          ]:[
            new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.js'),
          ]
};

In your package.json you can set this scripts:

If you are on Windows:

"scripts": {
         "dev": "set NODE_ENV=development&&webpack-dev-server --host 0.0.0.0 --hot --progress --colors --content-base build",
        "deploy": "set NODE_ENV=production&&webpack -p"
    }

If you are on Mac IOS: If export does not work here use set instead, the difference from windows and mac is the space after &&.

"scripts": {
         "dev": "export NODE_ENV=development&& webpack-dev-server --host 0.0.0.0 --hot --progress --colors --content-base build",
        "deploy": "export NODE_ENV=production&& webpack -p"
    }

The use the comand npm run watch to build in development and npm run deploy to build it for production in a minified version.

Answer 3

I'd highly recommend using Webpack Bundle Analyzer to make your bundle smaller (https://github.com/th0r/webpack-bundle-analyzer). You can see what is making your bundle so big. You might also be using all of firebase, lodash, and jquery. In addition to using webpack production plugins, try using ignore whatever you're not using and import only what you need like so: In webpack plugins:

    new webpack.IgnorePlugin(/^\.\/auth$/, /firebase$/),
    new webpack.IgnorePlugin(/^\.\/storage$/, /firebase$/),
    new webpack.IgnorePlugin(/^\.\/messaging$/, /firebase$/),

In your imports:

 const Firebase: any = require('firebase/app');  require('firebase/database');

For lodash, import only what you need or make a custom build (https://lodash.com/custom-builds):

import find from 'lodash/find' 

You can also create jquery custom builds as well.

Answer 4

I have a repo setup with just React / React Dom and a Hello Word React component. The vendor.js file is 189 KB.

https://github.com/timarney/react-setup

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

var config = {
  entry: {
    app: path.resolve(__dirname, './src/main.js'),
    vendors: ['react']
  },
  output: {
    path: './src',
    filename: 'bundle.js'
  },
  devServer: {
    inline: true,
    contentBase: './src',
    port: 3000
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel'
      }
    ]
  },
  plugins: [
    new webpack.optimize.OccurenceOrderPlugin(true),
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.UglifyJsPlugin({
      output: {
        comments: false
      },
      compress: {
        warnings: false,
        screw_ie8: true
      }
    }),
    new webpack.optimize.CommonsChunkPlugin('vendors', 'vendors.js')
  ]
}

if (process.env.NODE_ENV === 'production') {
  config.output.path = path.join(__dirname, 'dist/')
}

module.exports = config

Note: I'm setting the NODE ENV via an NPM Script

"scripts": {
    "start": "webpack-dev-server",
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "NODE_ENV=production webpack -p && cp src/index.html dist/index.html"
  },

Answer 5

React expects you to set NODE_ENV to 'production' for production builds, and to run it through Uglify -- this gets rid of a lot of extra verbosity, console logging, etc. Make sure you set that environment variable when building via webpack (e.g. NODE_ENV=production webpack at the command line).