Is it normal for Webpack to take over 9GB of memory?

Question

according to the task manager on Ubuntu node has 8 processes running taking between 900mb and 1.3gb of memory.

That feels like too much. Fortunately my computer has 12GB of memory, but is this too much? If so any idea why it's so much?

My computer does freeze up every so often and hiccup sometimes when webpack detects changes and starts running.

webpack: ^3.6.0, bundle tracker: ^0.2.0, dashboard: 1.0.0-5, webpack-dev-server: ^2.2.0, babel: ^6.3.26

I'm using WebpackDevServer like:

new WebpackDevServer(webpack(config), {
    headers: {
        'Access-Control-Allow-Origin': '*',
        'Access-Control-Allow-Headers': 'Content-Type, Authorization, x-id, Content-Length, X-Requested-With',
        'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS'
    },

    historyApiFallback: true,
    hot: true,
    publicPath: config.output.publicPath,
    quiet: true,    // Shows WebpackDashboard instead.
    watchOptions: {
        aggregateTimeout: 300,
        poll: 1000
    }
}).listen( ... );

Here is my webpack file:

const config = {
    context: __dirname,

    devtool: 'eval-cheap-module-source-map',

    module: {
        loaders: [
            {
                test: /\.js[x]?$/,
                exclude: /node_modules/,
                loader: 'babel-loader'
            },
            {
                test: /\.s[ac]ss$/,
                exclude: '/node_modules/',
                use: [{
                    loader: 'style-loader',
                    options: {
                        sourceMap: true
                    }
                }, {
                    loader: 'css-loader',
                    options: {
                        sourceMap: true
                    }
                }, {
                    loader: 'sass-loader',
                    options: {
                        sourceMap: true,
                        includePaths: [path.resolve(__dirname)]
                    }
                }]
            },
            {
                test: /\.(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
                exclude: '/node_modules/',
                loader: 'file-loader'
            },
            {
                test: /\.(jpe?g|png|gif)$/,
                exclude: '/node_modules/',

                // If an image is less than 10kb, use data-url for images, otherwise
                // falls back to file-loader.
                loaders: ['url-loader?limit=10000&name=images/[hash:12].[ext]']
            }
        ]
    },

    resolve: {
        descriptionFiles: ['package.json'],
        extensions: ['.js', '.jsx', '.scss'],
        mainFiles: ['index'],
        modules: ['node_modules', path.resolve(__dirname)],
    }
};

config.entry = {
    main: [
        'react-hot-loader/patch',
        'babel-polyfill',
        './index.jsx',
        'webpack/hot/only-dev-server',
        `webpack-dev-server/client?http://${ localConfig.ip }:${ localConfig.port }`
    ]
};


config.output = {
    path: path.resolve('./dist/'),
    publicPath: `http://${ localConfig.ip }:${ localConfig.port }/assets/bundles/`,
    filename: '[name].js'
};


config.plugins = [
    new webpack.HotModuleReplacementPlugin(),

    new webpack.NoEmitOnErrorsPlugin(),

    // Used by Django.
    new BundleTracker({ filename: './webpack-stats-dev.json' }),

    new webpack.NamedModulesPlugin(),

    new DashboardPlugin(dashboard.setData)
];

If someone knows a good list of troublshooting steps, that would be very helpful.

Answer 1

It looks like your process takes 1GB, but since they are executed 8 times, as separate processes... then they take 8GB of ram. That is where threads are winning.

If problem is with testing, you can force GC. In my cases, building is something quite fast. Fetching dependencies takes time, and also test execution is expensive. If that is also in your case look here for:

If I call gc() manually every 100 requests, RSS does not go above 70 MiB.

As you wrote, hard problem. I think you are at the edge.