Horrible webpack performance (8x) when ExtractTextPlugin is present

[medeeiros]

I've tried many things already, and I can't get rid of the performance issues when using the ExtractTextPlugin.

This is my stats.json file WITH ExtractTextPlugin
stats.json.zip
And the configuration looks something like:

module.exports = {
    name: 'mycujoo-client',
    target: 'web',
    entry: './statics/mycujoo-app/index.js',

    output: {
        path: path.resolve('./dist/client'),
        filename: '[name].bundle.[hash].js',
        publicPath: '/dist/client/'
    },

    module: {
        loaders: [
            loaders.js,
            loaders.cssFile
        ].concat(commonLoaders)
    },

    plugins: [
        new ExtractTextPlugin('[name].bundle.[hash].css', { allChunks: true }),
        new AssetsPlugin({ path: path.join(__dirname, '..', 'dist') }),
        new webpack.optimize.OccurenceOrderPlugin(),
        new webpack.NoErrorsPlugin(),
        new webpack.DefinePlugin({
            'process.env': JSON.stringify(process.env)
        })
    ],

    resolve: { alias: alias },

    postcss: postcss
}

and my stats WITHOUT ExtractTextPlugin
stats.json.zip

module.exports = {
    name: 'mycujoo-client',
    target: 'web',
    entry: './statics/mycujoo-app/index.js',

    output: {
        path: path.resolve('./dist/client'),
        filename: '[name].bundle.[hash].js',
        publicPath: '/dist/client/'
    },

    module: {
        loaders: [
            loaders.js,
-           loaders.cssFile
+           loaders.cssInline
        ].concat(commonLoaders)
    },

    plugins: [
-       new ExtractTextPlugin('[name].bundle.[hash].css', { allChunks: true }),
        new AssetsPlugin({ path: path.join(__dirname, '..', 'dist') }),
        new webpack.optimize.OccurenceOrderPlugin(),
        new webpack.NoErrorsPlugin(),
        new webpack.DefinePlugin({
            'process.env': JSON.stringify(process.env)
        })
    ],

    resolve: { alias: alias },

    postcss: postcss
}

where

cssInline:  { test: /\.css$/, loader: 'style-loader!css-loader?sourceMap&modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss-loader' },
cssFile:    { test: /\.css$/, loader: ExtractTextPlugin.extract('style-loader', 'css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss-loader') },

Because I'm generating two bundles, the performance is twice as bad.
I really don't know what to do.

[alberto]

Same issue here. (actually worse, 13x in my case)
Time with ExtractTextPlugin: 487878ms
Time without ExtractTextPlugin: 37175ms

[avindra]

Have you guys always had this performance issue or is it with specific releases of the plugin?

[medeeiros]

I have tried with 0.8.2 and 1.0.0 and I have the issue on both versions

[medeeiros]

@alberto do you have any idea why?

[alberto]

No. I updated some package dependencies, and tweaked the configuration and the problem went away, but I don't know what was causing it.

[medeeiros]

Would you be so kind to provide me with your configuration? so I can compare with mine.

[alberto]

My config is a bit complex. Let me try to figure out what was it.

[alberto]

Try updating your loaders. One of this fixed it for me:

-    "autoprefixer-loader": "2.1.0",
+    "autoprefixer-loader": "3.1.0",
-    "css-loader": "0.17.0",
+    "css-loader": "0.23.1",
-    "extract-text-webpack-plugin": "0.8.2",
-    "file-loader": "0.8.4",
+    "extract-text-webpack-plugin": "0.9.1",
+    "file-loader": "0.8.5",
-    "html-loader": "0.3.0",
-    "html-webpack-plugin": "1.6.1",
+    "html-loader": "0.4.0",
+    "html-webpack-plugin": "1.7.0",,
-    "json-loader": "0.5.3",
+    "json-loader": "0.5.4",
-    "style-loader": "0.12.3",
+    "style-loader": "0.13.0",
-    "ts-loader": "0.5.5",
-    "tslint": "3.0.0",
-    "typescript": "1.6.2",
+    "ts-loader": "0.7.2",
+    "tslint": "3.2.1",
+    "typescript": "1.7.5",
-    "webpack-stream": "2.2.0",
+    "webpack-stream": "3.1.0",

[medeeiros]

it still very slow to me.

[alberto]

Sorry, here is my config in case it helps: https://gist.github.com/alberto/c273f2623e13c256bacb

[ElegantScripting]

I have the same problem as well.

[allenz-crypto]

I believe this plugin is considerably slowing down my webpack builds as well. Are there any solutions to this?

[Hulkmaster]

same issue here
has someone found solution?

[bebraw]

Can you try against webpack 2?

[manuelbieh]

Still slow here. Not 100% sure if it is because of ExtractTextPlugin or not but 99% sure. Using css imports in 20+ files so I cannot easily test it by removing it because it would break my whole webpack build 😕 but I'm using a very similar webpack config without ExtractTextLoader in another project of similar size and complexity and build times are around 3-5 times faster there.

Webpack develop build takes 13.027s on my machine and this is my config:

test: /\.s?css$/,
use: ExtractTextPlugin.extract({
    fallbackLoader: 'style-loader',
    loader: [
        isProduction()
            ? 'css-loader?camelCase&modules&importLoaders=1&localIdentName=[hash:base64:5]'
            : 'css-loader?camelCase&modules&importLoaders=1&localIdentName=[name]__[local]',
        'postcss-loader',
        'sass-loader'
    ]
})

new ExtractTextPlugin({
    filename: isProduction() ? 'css/[name].[hash].css' : 'css/[name].css',
}),

Webpack version is 2.2.0. Maybe postcss-loader or sass-loader are the cause. I dont know 😕

[medeeiros]

By simply setting disable: true I get 2x faster builds. 😢

[matthewjumpsoffbuildings]

im also getting really slow builds with extract text plugin - if i set disable:true on the extract text plugin entry in my webpack config, my SASS builds take less than half as long. Im using a main SASS entry point that @imports around 10 SASS partials and some libraries (susy, bourbon, normalise).

[KazW]

I ran into this problem as well. I tracked it down to webpack-contrib/css-loader#124, using css-loader 0.14.5 dropped my build time by 30%.

[matthewjumpsoffbuildings]

@KazW that may well be a part of the issue, but if I only disable extract text plugin, and keep css-loader+sass-loader, it literally halves my build time. It seems clear that extract text plugin itself is a huge source of slowness

[alexander-akait]

Seems issue related to css-loader, not extract-text-webpack-plugin.

/cc @matthewjumpsoffbuildings @GuilhermeMedeiros @manuelbieh @Hulkmaster @allenylzhou @alberto The problem is still present? If yes, please provide minimal reproducible test repo.

[matthewjumpsoffbuildings]

@evilebottnawi not in my experience - if i disable extract-text-webpack-plugin and leave css-loader and sass-loader enabled, my compile time halves.

it appears to have something to do with extract-text-webpack-plugin and sass includes. it seemed like the more sass includes i used (both from my own files and from npm sass libraries like susy and bourbon), the more the compile time increased.

i will attempt to make a test repo asap

[alexander-akait]

@matthewjumpsoffbuildings just ping me when your do it

[jaunkst]

@matthewjumpsoffbuildings getting the same thing. extract-text-webpack-plugin is getting worse at a exponential rate, it is not scaling.

[joshwiens]

In essence extract-text is a hack to make up for a lack of first class css support in Webpack.

Trying to fix that problem here isn't practical nor would it be effective, Tobias is attacking the problem at its source. For those that have not read it yet, https://medium.com/webpack/the-new-css-workflow-step-1-79583bd107d7

Step 1 of a few on the road to solving the performance issues in the CSS workflow the right way. Everyone is going to have to bear with us while we get this handled, it's an architectural problem not a bug we can run down at patch.

Information related to this topic is pushed out publicly on medium.com, the best way to stay current would be to follow https://medium.com/webpack && https://medium.com/@sokra. You will in most cases, end up with detailed information the same time as myself, @michael-ciniawsky, @bebraw & @evilebottnawi get it.