Css-loader: newer version makes webpack slowly

[kimown]

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

bug
What is the current behavior?

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

the same issue https://github.com/webpack-contrib/css-loader/issues/124, I make a simple test, I only change different version of css-loader in my project, here is the screenshot. It seems if I use a newer version of css-loader, the speed will be slower.

css-loader : 0.28.0 , average time is about 6s

css-loader : 0.23.1 , average time is about 3s

css-loader : 0.14.5, average time is about 2s

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

webpack 2.2.1
node v7.6.0
osx 10.11.6

[michael-ciniawsky]

Thx, we are aware of this already 😛 , css-loader v0.14.0+ added CSS Modules to the loader and that's why css-loaderis slower now (Parsing). This will be fixed in the next major release of css-loader where CSS Modules will be refactored out of the loader and need to be used as a opt-in (plugin) via postcss-loader, but it requires changes all over the place and is simply WIP atm

[dcworldwide]

This is so painful right now. I'm afraid to do any front end dev my productivity is way down. Really wish I could help..

[alexander-akait]

@dcworldwide in enar future we release new version css-loader without postcss and css-modules (it be separate plugin for postcss-loader), also your can use cache-loader. Also your can provide webpack config and i will try to give advice, usually poor performance is associated with improper configuration

[dcworldwide]

@evilebottnawi That's really good news. I think a lot of people will benefit from that work.

Would be great to learn if there are things we can do to optimise build times in the interim.

My config is:

/**
 * @see https://webpack.js.org/loaders/css-loader/
 * @see https://github.com/webpack-contrib/sass-loader
 */
exports.setupCSS = function (paths) {
    return {
        module: {
            rules: [
                {
                    test: /\.css/,
                    use: [
                        'style-loader',
                        'css-loader'
                    ],
                    include: paths
                },
                {
                    test: /(\.scss|\.sass)$/,
                    use: ExtractTextPlugin.extract({
                        fallback: "style-loader",
                        use: [
                            {
                                loader: 'css-loader',
                                options: {
                                    sourceMap: true,
                                    importLoaders: 1,
                                    modules: true,
                                    // url: true,
                                    // import: true,
                                    // localIdentName: '[name]__[local]--[hash:base64:5]',
                                    hashPrefix: 'package-name' + Date.now(),
                                    localIdentName: '[path][name]__[local]--[hash:base64:5]',
                                    discardComments: {
                                        removeAll: true
                                    }
                                }
                            },
                            {
                                loader: "sass-loader",
                                options: {
                                    sourceMap: true
                                }
                            }
                        ]
                    })
                }
            ]
        }
    };
}

I'm going to try disabled source maps and comment striping.

[alexander-akait]

@dcworldwide seems all right (yep, disabling source map speedup build), maybe your have some plugins, which spend a lot of time?