Question

18

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

rated 0 times [ 24] [ 6] / answers: 1 / hits: 26941 / 8 Years ago, mon, february 15, 2016, 12:00:00

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

brendaw

Add To Favorites

Follow

Total Points: 508

Total Questions: 90

Total Answers: 100

Location: Maldives

Member since Sat, Jan 29, 2022

2 Years ago

answered 8 Years ago dustin · Accepted Answer

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.