webpack bundle size vs requirejs bundle size

Question

I'm trying to migrate a requireJS based app to webpack.

This app doesn't have many dependencies - actually it only needs a promise polyfill - and I've already figured out how to make webpack using the minified one.

The bundle size with requireJS used to be 43KB, when using webpack it's 121KB.

While 121KB isn't really huge it is a notable size increase.

From running webpack --display-reasons --display-modules I have learned that there seems to be some node_module dependencies included in my bundle. Way more than I expected.

I see things like buffer, readable-stream, stream-http, stream-browserify, core-util-is, buffer-shims, ...

Is this expected / part of the webpack wrapper code?

Is there anything I can do to exclude these dependencies?

This is my webpack.config.js:

var webpack = require('webpack');

module.exports = {
    entry: {
        "mynexuz": "./js/mynexuz-api.js",
        "kws": "./js/kws-api.js",
        "main": "./js/main.js",
        "quest": "./js/quest.js"
    },

    output: {
        filename: "./dist/[name]-bundle.js",
    },

    plugins: [
        new webpack.optimize.UglifyJsPlugin({
            compress: {
                warnings: false
            }
        }),
        new webpack.DefinePlugin({
            'process.env': {
                'NODE_ENV': JSON.stringify('production'),
            }
        })
    ],
  
    node: {
        //stream: false,
        //process: false,
        //global: false
    },

    // Enable sourcemaps for debugging webpack's output.
    devtool: "source-map",

    resolve: {
        modules: ['js', 'js/lib', 'node_modules'],
        // Add '.ts' and '.tsx' as resolvable extensions.
        extensions: [".webpack.js", ".web.js", ".ts", ".tsx", ".js"]
    },

    module: {
        loaders: [
            // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
            {
                test: /\.js$/,
                loader: "source-map-loader",
                exclude: /node_modules/
            },
            // All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.
            {
                test: /\.tsx?$/,
                loader: "awesome-typescript-loader",
                exclude: /node_modules/
            }
        ]
    },
};

Answer 1

This doesn't work for all libraries you are using, but when possible you can save on file size by only importing the actual function/component you need to use.

Here is an example with lodash

import has from 'lodash/has';

That way above will ONLY import the has method.

However if you do either of the following:

import { has } from 'lodash';

Or

import _ from 'lodash';

Then you will import ALL of the lodash library which will bump up your file size.

However with other libraries (i.e. current version of moment.js) it's not so simple to import just the PART of the library you need.

There are a few other ways to try to solve this problem (i.e. tweaking your webpack settings) but I would start with this method.

Answer 2

After looking deeper into the issue I've found the reason for the large size of the bundle. In true requireJS style I had:

define(['http', 'config'], function (Http, Config) { ... });

This 'http' thing was supposed to refer to my own library, but webpack resolved this to some NPM module, bringing in all the aforementioned dependencies.

I've now changed the code to:

define(['./http', 'config'], function (Http, Config) { ... });

And the bundle sizes are back to around 44KB.