Source:  Twitter logo

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?

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.

15 users liked answer #0dislike answer #015
evanjmg profile pic
evanjmg

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.

5 users liked answer #1dislike answer #15
Vinicius Vieira profile pic
Vinicius Vieira

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"
  },
4 users liked answer #2dislike answer #24
Tim Arney profile pic
Tim Arney

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

3 users liked answer #3dislike answer #33
David Guan profile pic
David Guan

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

2 users liked answer #4dislike answer #42
Brendan Gannon profile pic
Brendan Gannon

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.

1 users liked answer #5dislike answer #51
nascente_diskreta profile pic
nascente_diskreta

Copyright © 2022 QueryThreads

All content on Query Threads is licensed under the Creative Commons Attribution-ShareAlike 3.0 license (CC BY-SA 3.0).