Bundle size becomes much bigger with Webpack 2

[sonicoder86]

When running my build on the stable branch i get this

Hash: bcb00f2d62e74000ed17
Version: webpack 1.13.0
Time: 4193ms
              Asset     Size  Chunks             Chunk Names
    index.bundle.js  2.26 MB       0  [emitted]  main
index.bundle.js.map  2.55 MB       0  [emitted]  main
    + 356 hidden modules

but when i upgrade to the latest beta the bundled file size and the number of modules becomes much more

Hash: 7fcf40a3eb38c81d3e15
Version: webpack 2.1.0-beta.7
Time: 4562ms
          Asset    Size  Chunks             Chunk Names
index.bundle.js  6.9 MB       0  [emitted]  main
    + 465 hidden modules

The bundled application is here angular2-esnext-todomvc.

[sonicoder86]

Seems like it ignores my devtool setting in my configuration file

[ghost]

I too had he similar issue with Webpack 2 where the size of bundle grew 3 times. Would be great to get this fixed.

[wa-Nadoo]

Do not use -d shortcut. It resets devtool to eval. Seems like a bug.

[TheLarkInn]

@wa-Nadoo @BlackSonic @ssbiswal1987 Does updating to webpack@2.1.0-beta.14 fix this issue. This will help us prioritize this issue.

[bebraw]

Closing due to inactivity.

[ConAntonakos]

In an effort to not create another issue, I also wanted to note that my bundle size doubled after transitioning to Webpack 2.2.1. Any help/advice would be greatly appreciated!

This is my .babelrc:

{
  presets: [
    ["env", {modules: false}],
    "react-app",
  ],
  plugins: [
    "add-module-exports",
    "syntax-async-functions",
    "transform-react-constant-elements",
    "transform-do-expressions",
    "transform-object-rest-spread",
  ]
}

[bebraw]

@ConAntonakos Can you open a separate issue with a link to a little project to study? Make sure you aren't bundling sourcemaps inline. You can also try webpack analyse tool to check out the output.

[ConAntonakos]

I think I figured it out after additional testing. When I don't extract my CSS/SASS, it seems like it's included in my bundle now, and literally doubles the size. I did not know that. I tried extracting the CSS via extract-text-webpack-plugin into a separate bundled CSS file, and it brought my bundled JS file back to what I expected (and a shaved a few KB). So, that was the solution. Now, I have to configure this with webpack-dev-server since it's apparently not writing to disk.

[bebraw]

@ConAntonakos It's not a problem for dev usage. Writing CSS inline is fine then. ExtractTextPlugin or extract-loader is handy for production, though, as you noticed.

[jakoblind]

Hi, just wanted to share that I had this issue and did what @wa-Nadoo suggested and not use -d shortcut and that reduced the size.

[vpachedzhi]

Hi @bebraw ,

I am getting into the initially reported issue. Below you can see the size of the bundle.js with version 1.13.3 and the new size of the bundle.js after upgrading to version 2.2.1.

> webpack -d --watch

Hash: 9b658d6ec32c007de5fa
Version: webpack 1.13.3
Time: 10643ms
         Asset     Size  Chunks             Chunk Names
     bundle.js  3.45 MB       0  [emitted]  main
    bundle.css  24.2 kB       0  [emitted]  main
 bundle.js.map  3.76 MB       0  [emitted]  main
bundle.css.map  33.2 kB       0  [emitted]  main

> webpack -d --watch


Webpack is watching the files…

Hash: 0c6e467e67f03b6557b9
Version: webpack 2.2.1
Time: 9179ms
     Asset     Size  Chunks                    Chunk Names
 bundle.js  8.54 MB       0  [emitted]  [big]  main
bundle.css  24.6 kB       0  [emitted]         main

I am also adding the upgraded webpack.config.js for reference as well:

const webpack = require('webpack');
const path = require('path');

const BUILD_DIR = path.resolve(__dirname, 'webapp/build');
const SRC_DIR = path.resolve(__dirname, 'webapp/src');

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

const config = {
    entry: SRC_DIR + '/index.jsx',
    output: {
        path: BUILD_DIR,
        filename: 'bundle.js'
    },
    plugins: [
        new ExtractTextPlugin("bundle.css")
        new webpack.LoaderOptionsPlugin({
            options: {
                eslint: "./.eslintrc"
            }
        })
    ],
    module: {
        rules: [{
            test: /\.css$/,
            use: ExtractTextPlugin.extract({
                fallback: "style-loader",
                use: [{
                    loader: "css-loader",
                    options: {
                        modules: true,
                        localIdentName: "[local]--[hash:base64:5]",
                        importLoaders: true
                    }
                }]
            })
        }, {
            test: /\.jsx*$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
        }, {
            test: /\.(jpe?g|gif|png|svg)$/i,
            loader: 'url-loader?limit=10000',
        }, {
            test: /\.json$/,
            loader: 'json-loader',
        },]
    }
};

module.exports = config;

Am I missing something during the upgrade steps that could affect the size of the bundle.js to increase almost 3 times?
Please let me know if you need some more information and I will provide it.

Best Regards,
Vasil

[bebraw]

@vpachedzhi The only explanation I can think of is that source maps are getting inlined in your webpack 2 setup. Could it be that -d flag that enables the behavior? You could try setting devtool: 'source-map' explicitly in your configuration to generate the separate source map files.

[vpachedzhi]

Yes, removing the -d flag and explicitly setting the devtool property reduced size of the bundle.js.
Now I see that the new version Webpack 2.2.1 even reduced the size of bundle.js to 3.17MB compared to 3.45MB with the old version 1.13.3.

Thanks @bebraw

[saranshbansal]

I can confirm the -d flag was the issue. My bundle size reduced dramatically from 8.5mb to 1.31mb.

It will be great if someone could explain the real reason behind the huge reduction.

[wa-Nadoo]

-d flag adds inline source map to your bundle.