bundle size ~20% larger after upgrading to v2.x

[busticated]

Do you want to request a feature or report a bug?

bug. i think?

What is the current behavior?

after upgrading to webpack v2.2.1 from webpack v1.14.0 my gzipped bundle size is ~20% larger. i've read the related reports that i could find (1, 2) and didn't spot any config-related tweak that could be causing the difference. using webpack-bundle-analyzer and running in "production" mode (minified, no sourcemaps), i see the following:

before:

after:

Running in "development" mode (unminified + sourcemaps) mode i see:

before:

Hash: aab17710a8b17fb2aabd
Version: webpack 1.14.0
Time: 6660ms
     Asset    Size  Chunks             Chunk Names
 bundle.js  9.3 MB       0  [emitted]  bundle

after:

Hash: 704673d874af4ba02b67
Version: webpack 2.2.1
Time: 6618ms
     Asset     Size  Chunks                    Chunk Names
bundle.js  10.1 MB       0  [emitted]  [big]  bundle

my code is pretty simple - 100% CJS-style modules w/o any ES6 transpilation (yes, i know it's 2017 ;-), and a bunch of fairly well-know libs (react, immutable.js, bluebird, lodash, are the biggies).

If the current behavior is a bug, please provide the steps to reproduce.

my "production" webpack config:

{
    "entry": {
        "bundle": "./lib/client/index.js"
    },
    "output": {
        "path": "/path/to/my/build/directory",
        "filename": "[name].js",
        "publicPath": "/static/js"
    },
    "resolve": {
        "alias": {
            "underscore": "lodash"
        }
    },
    "module": {
        "rules": []
    },
    "plugins": [
        new webpack.DefinePlugin({
            'process.env': { NODE_ENV: JSON.stringify('production') }
        }),
        new webpack.optimize.UglifyJsPlugin({
            sourceMap: false,
            compress: {
                dead_code: true,
                keep_fargs: true,
                warnings: false
            },
            output: {
                comments: false
            }
        })
    ],
    "devtool": false
}

What is the expected behavior?

production bundle generated by v2.2.1 is roughly the same size or smaller than the one generated by v1.14.0

If this is a feature request, what is motivation or use case for changing the behavior?

Please mention other relevant information such as the browser version, Node.js version, webpack version and Operating System.

macOS v10.12.3, node v6.9.1, webpack v2.2.1

[bebraw]

There's not enough information to say why. Is it possible for you to share stats for both builds? If not, can you set up a small project that shows the difference so that it can be studied in detail.

[sokra]

The size of some node.js builtin polyfills increased, i. e. the crypto package is much larger...

Are you using any other these?

[busticated]

thanks for taking a look.

Is it possible for you to share stats for both builds?

yep, give me a bit to round them up :)

The size of some node.js builtin polyfills increased, i. e. the crypto package is much larger...
Are you using any other these?

not intentionally. is there a way to verify they are being included? if they are, how can i track down what caused them to be?

[busticated]

yep, give me a bit to round them up :)

lol, these things are huge even after stripping out the "source": fields. so, uh, yeah. i spun thru 'em and pulled out a couple of things that looked interesting is there anything in particular i should look for?

The size of some node.js builtin polyfills increased, i. e. the crypto package is much larger

given what i found digging thru my stats.json file, i'm thinking this is the underlying cause.

can these polyfills be excluded? adding node: { Buffer: false } to my config didn't change the bundle.js size.

bottom-line: a bunch of dependencies are being included by default w/o being required by my code - specifically: bn.js, buffer, readable-stream, browserify-aes, hash.js, browserify-sign, parse-asn1, sha.js, asn1.js, public-encrypt, and likely a few more. on the whole, these dependencies appear to be webpack-only (iow, not dependencies of my code or of the dependencies my code uses).

[busticated]

more investigation:

if i replace my entry module w/

'use strict';

module.exports = function(){};

my bundle.js size is 311b 👍

if i edit that to be:

'use strict';

var uuid = require('node-uuid');
module.exports = function(){};

my bundle.js size is 95.5k 👎

😮 💡 😂

node-uuid is the only module in my app that uses require('crypto') but it also shims it out for use in the browser by leveraging the browser field in its package.json

OR DOES IT???

lol, turns out a while back they renamed node-uuid to uuid and froze node-uuid at v1.4.7 so i've had the old one this whole time. of course, the old version doesn't handle browser-side shimming in a webpack-friendly way so webpack just pulls in the crypto polyfill and chugs along happily 😲 💀

edit:
so, after switching over to uuid v3.0.0, my bundle.js size is now: 284.3k 👍 👏

i guess this can be closed up now. thanks for the pointers.