CODEWITHSUNDEEP
javascriptbuildreactjswebpack
ervazu
ervazu

Reputation: 362

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

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 have uglifyJS on, but this doesn't seem to help a lot (5.09 > 4.87mb and 2.9 > 2.87mb)

var webpack = require('webpack');
var ExtractTextPlugin = require("extract-text-webpack-plugin");

require('es6-promise').polyfill();

var config = {
  entry: {
    app: [
      './src/entry.jsx'
    ],
    vendor: [
      'react',
      'lodash',
      'superagent'
    ]
  },
  output: {
    path: './build',
    filename: "bundle.js"
  },
  eslint: {
    configFile: './.eslintrc'
  },
  devtool: 'eval-source-map',
  module: {
    loaders: [
      { test: /\.(js|jsx)$/, loaders: ['react-hot', 'babel?experimental'], exclude: /node_modules/},
      { test: /\.(js|jsx)$/, loader: "eslint-loader", exclude: /node_modules/},
      { test: /\.json$/, loader: 'json' },
      { test: /\.yml$/, loader: 'json!yaml' },
      { test: /\.scss$/, loader: 'style!css!sass' },
      { test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?limit=100000' }
    ]
  },
  plugins: [
    new webpack.DefinePlugin({'process.env': {'NODE_ENV': JSON.stringify('production')}}),
    new webpack.optimize.CommonsChunkPlugin("vendor", "vendor.bundle.js"),
    new webpack.optimize.UglifyJsPlugin({minimize: true}),
    new webpack.NoErrorsPlugin()
  ]
};

module.exports = config;

My package.json

{
  "license": "MIT",
  "engines": {
    "iojs": ">= 1.6.2"
  },
  "scripts": {
    "create:index": "mustang -t index.tmpl -i config.json -o build/index.html",
    "predev": "mkdir -p build/ && npm run create:index",
    "dev": "webpack-dev-server --host 0.0.0.0 --hot --progress --colors --content-base build",
    "backend": "NODE_ENV=production node server/server.js",
    "backend:dev": "DEBUG=tinderlicht node server/server.js",
    "predeploy": "mkdir -p build/ && npm run create:index",
    "deploy": "NODE_ENV=production webpack -p",
    "test": "node webpack-mocha.config.js"
  },
  "devDependencies": {
    "autoprefixer-loader": "^3.2.0",
    "axios": "^0.7.0",
    "babel": "^5.8.23",
    "babel-core": "^5.8.25",
    "babel-eslint": "^4.1.3",
    "babel-loader": "^5.3.2",
    "bluebird": "^2.10.2",
    "css-loader": "^0.19.0",
    "es6-collections": "^0.5.1",
    "es6-promise": "^3.0.2",
    "eslint": "^1.6.0",
    "eslint-loader": "^1.1.0",
    "eslint-plugin-react": "^3.5.1",
    "extract-text-webpack-plugin": "^0.8.2",
    "file-loader": "^0.8.1",
    "firebase": "^2.3.1",
    "fireproof": "^3.0.3",
    "jquery": "^2.2.0",
    "json-loader": "^0.5.1",
    "jsonld": "^0.4.2",
    "jsx-loader": "^0.13.2",
    "lodash": "^3.3.0",
    "mustang": "^0.1.3",
    "node-sass": "^3.3.3",
    "react": "^0.14.0",
    "react-dom": "^0.14.0",
    "react-hot-loader": "^1.1.5",
    "sass-loader": "3.0.0",
    "style-loader": "^0.12.4",
    "superagent": "^1.4.0",
    "url-loader": "^0.5.5",
    "webpack": "^1.5.3",
    "webpack-dev-server": "^1.7.0"
  },
  "dependencies": {
    "body-parser": "^1.15.0",
    "cors": "^2.7.1",
    "debug": "^2.2.0",
    "express": "^4.13.4",
    "mustache": "^2.2.1",
    "nodemailer": "^2.1.0",
    "nodemailer-sendmail-transport": "^1.0.0",
    "react-radio-group": "^2.2.0",
    "uglifyjs": "^2.4.10"
  }
}

Does anyone have any idea on how to fix this?

Upvotes: 18

Views: 28659

Answers (6)

nascente_diskreta
nascente_diskreta

Reputation: 79

Install source-map-explorer with sudo npm install -g source-map-explorer and run it with source-map-explorer path/to/files/*.js. The program will analyze your bundle and open an HTML page in your browser detailing how much every dependency is contributing to the total size, and how much your own code is contributing.

Screenshot of source-map-explorer at work

Upvotes: 1

David Guan
David Guan

Reputation: 4300

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

Upvotes: 3

evanjmg
evanjmg

Reputation: 3790

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.

Upvotes: 15

Tim Arney
Tim Arney

Reputation: 1826

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"
  },

Upvotes: 4

Vinicius Vieira
Vinicius Vieira

Reputation: 398

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.

Upvotes: 5

Brendan Gannon
Brendan Gannon

Reputation: 2652

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).

Upvotes: 2

Related Questions