Webpack4 is slower than webpack3 in my project.

Bug report

What is the current behavior?
In my project, webpack4 is slower than webpack3. Why is it?
If used cache, webpack4 is quick. But I can not use cache.
I try to close some loaders to resolve it, but as before.
image

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

webpack3.x config

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

const babelOptions = {
    presets: [
        [require.resolve('babel-preset-env'), {
            modules: false
        }],
        require.resolve('babel-preset-stage-2'),
        require.resolve('babel-preset-react')
    ],
    plugins: [
        require.resolve('babel-plugin-syntax-async-functions'),
        require.resolve('babel-plugin-syntax-dynamic-import'),
        require.resolve('babel-plugin-transform-async-to-generator'),
        require.resolve('babel-plugin-transform-regenerator'),
        require.resolve('babel-plugin-transform-runtime'),
        [require.resolve('babel-plugin-import'), {
            libraryName: 'antd',
            style: true
        }]
    ]
};

module.exports = {
    entry: {
        'sales.dealerSalesBusinessPermit': './temp/sales.dealerSalesBusinessPermit'
    },
    target: 'web',
    devtool: 'nosources-source-map',
    output: {
        pathinfo: true,
        path: path.resolve('./release'),
        filename: 'scripts/[name].[chunkhash].min.js'
    },
    resolve: {
        modules: [
            'node_modules'
        ],
        alias: {
            Shared: '@shsdt/web-shared/lib',
            Shell: '@shsdt/web-shell/lib'
        },
        extensions: ['.js', '.jsx', '*'],
        mainFields: ['browser', 'browserify', 'module', 'main'],
        symlinks: false
    },
    module: {
        rules: [{
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loader: require.resolve('babel-loader'),
            options: babelOptions
        }, {
            test: /\.css$/,
            use: [require.resolve('style-loader'), {
                loader: require.resolve('css-loader'),
                options: {
                    camelCase: true,
                    importLoaders: 1,
                    localIdentName: '[name]_[local]_[hash:base64:6]'
                }
            }]
        }, {
            test: /\.less$/,
            use: [require.resolve('style-loader'), {
                loader: require.resolve('css-loader')
            }, {
                loader: require.resolve('less-loader'),
                options: {
                    javascriptEnabled: true,
                    modifyVars: {}
                }
            }]
        }, {
            test: /\.(jpg|png|xlsx|xls)$/,
            loader: require.resolve('file-loader'),
            options: {
                name: '[path][name].[ext]',
                outputPath(name) {
                    return `assets/${name.replace('node_modules/', '')
                        .replace('@shsdt/', '').replace('lib/', '')
                        .replace('assets/', '')}`;
                }
            }
        }]
    },
    plugins: [
        new webpack.DefinePlugin({
            'process.env.NODE_ENV': '"production"',
            PRODUCTION: true,
            DEBUG: false
        }),
        new webpack.optimize.ModuleConcatenationPlugin(),
        new webpack.optimize.CommonsChunkPlugin({
            name: 'common',
            minChunks: module => {
                if(!module.context)
                    return false;
                if(module.context.indexOf('@shsdt') > -1)
                    return module.context.indexOf('web-shared') > -1 ||
                    module.context.indexOf('web-bootstrap') > -1;
                return module.context.indexOf('node_modules') > -1;
            }
        }),
        new webpack.optimize.CommonsChunkPlugin({name: 'manifest'}),
        new webpack.optimize.UglifyJsPlugin({
            minimize: true,
            sourceMap: true,
            comments: false
        })
    ]
};

webpack4.x config

const path = require('path');
const webpack = require('webpack');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

const babelOptions = {
    presets: [
        [require.resolve('babel-preset-env'), {
            modules: false
        }],
        require.resolve('babel-preset-stage-2'),
        require.resolve('babel-preset-react')
    ],
    plugins: [
        require.resolve('babel-plugin-syntax-async-functions'),
        require.resolve('babel-plugin-syntax-dynamic-import'),
        require.resolve('babel-plugin-transform-async-to-generator'),
        require.resolve('babel-plugin-transform-regenerator'),
        require.resolve('babel-plugin-transform-runtime'),
        [require.resolve('babel-plugin-import'), {
            libraryName: 'antd',
            style: true
        }]
    ]
};
module.exports = {
    entry: {
        'sales.dealerSalesBusinessPermit': './temp/sales.dealerSalesBusinessPermit'
    },
    mode: 'production',
    target: 'web',
    devtool: 'nosources-source-map',
    output: {
        pathinfo: true,
        path: path.resolve('./release'),
        filename: 'scripts/[name].[chunkhash].min.js'
    },
    resolve: {
        modules: [
            'node_modules'
        ],
        alias: {
            Shared: '@shsdt/web-shared/lib',
            Shell: '@shsdt/web-shell/lib'
        },
        extensions: ['.js', '.jsx', '*'],
        mainFields: ['browser', 'browserify', 'module', 'main'],
        symlinks: false
    },
    optimization: {
        splitChunks: {
            cacheGroups: {
                commons: {
                    test: /[\\/]node_modules[\\/]/,
                    name: 'common',
                    chunks: 'all'
                }
            }
        },
        minimizer: [
            new UglifyJsPlugin({
                sourceMap: true,
                cache: false,
                parallel: 4,
                extractComments: false
            })
        ]
    },
    module: {
        rules: [{
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loader: require.resolve('babel-loader'),
            options: babelOptions
        }, {
            test: /\.css$/,
            use: [require.resolve('style-loader'), {
                loader: require.resolve('css-loader'),
                options: {
                    camelCase: true,
                    importLoaders: 1,
                    localIdentName: '[name]_[local]_[hash:base64:6]'
                }
            }]
        }, {
            test: /\.less$/,
            use: [require.resolve('style-loader'), {
                loader: require.resolve('css-loader')
            }, {
                loader: require.resolve('less-loader'),
                options: {
                    javascriptEnabled: true,
                    modifyVars: {}
                }
            }]
        }, {
            test: /\.(jpg|png|xlsx|xls)$/,
            loader: require.resolve('file-loader'),
            options: {
                name: '[path][name].[ext]',
                outputPath(name) {
                    return `assets/${name.replace('node_modules/', '')
                            .replace('@shsdt/', '').replace('lib/', '')
                            .replace('assets/', '')}`;
                }
            }
        }]
    },
    plugins: [
        new webpack.DefinePlugin({
            PRODUCTION: true,
            DEBUG: false
        })
    ]
};

What is the expected behavior?
Useing this config, I can not use cache , webpack4 is slower than webpack3. Why is it?

Other relevant information:
webpack version: 4.10.1 / 3.10.0
Node.js version: 8.9.3
Operating System: win10(64)
Additional tools:

Author: Fantashit

1 thought on “Webpack4 is slower than webpack3 in my project.

  1. mode: "production" adds a lot of not-so-well-known plugins which was not the case in webpack 3. In consequence, webpack 4 is slower if you were not using them before.

Comments are closed.