shama / webpack-stream

:tropical_drink: Run webpack through a stream interface
MIT License
1.39k stars 122 forks source link

Slowdown after upgrade to 6.x.x. #237

Closed Drafteed closed 3 years ago

Drafteed commented 3 years ago

Hello @shama! Thx for your work!

After upgrade from 5x to 6x:

Webpack stream 5.2.1:

[18:05:43] Starting 'js'...
[18:05:43] Version: webpack 4.46.0
Built at: 19.04.2021 18:05:43
 1 asset
Entrypoint main = bundle.js
[18:05:43] Finished 'js' after 89 ms

Webpack stream 6.1.2:

[18:08:14] Starting 'js'...
[18:08:25] Version: webpack 4.46.0
Built at: 19.04.2021 18:08:25
    Asset      Size  Chunks             Chunk Names
bundle.js  4.87 MiB    main  [emitted]  main
Entrypoint main = bundle.js
[18:08:25] Finished 'js' after 11 s

Gulpfile task:

gulp.task('js', () => {
    return gulp.src(['./src/js/**/*'])
        .pipe(webpack(require('./webpack.development.js')))
        .pipe(gulp.dest('/dist/'));
});

webpack.development.js:

const webpack = require('webpack');

module.exports = {
    entry: "./src/js/app.js",
    output: {
        path: __dirname,
        filename: "bundle.js",
        publicPath: "/assets/js/"
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                loader: "babel-loader",
                exclude: /(node_modules\/(?!ogl)+|bower_components)/,
                options: {
                    compact: true
                }
            },
            {
                test: /\.js$/,
                loader: 'imports-loader?define=>false'
            },
            {
                test: /\.(glsl|vs|fs|vert|frag)$/,
                exclude: /node_modules/,
                use: [
                    'raw-loader',
                    'glslify-loader',
                ],
            }
        ]
    },
    resolve: {
        modules: ['./src/js', 'node_modules']
    },
    plugins: [
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery",
            "window.jQuery": "jquery"
        }),
        new webpack.DefinePlugin({
            'NODE_ENV': JSON.stringify(process.env.NODE_ENV)
        })
    ],
    mode: "development",
    devtool: "eval-source-map"
};
shama commented 3 years ago

Give the latest a try (about to release 7.0.0), it appears faster although I didn't see any difference in performance between webpack-stream 5 and 6 with my tests but maybe one of the specific loaders/plugins above exacerbates the issue or maybe using a different version of webpack?

Webpack stream 6.1.2:
➜  ws-test time gulp js
[20:18:09] Using gulpfile ~/Documents/www/ws-test/gulpfile.js
[20:18:09] Starting 'js'...
[20:18:10] Version: webpack 4.46.0
Built at: 08/30/2021 8:18:10 PM
                  Asset       Size  Chunks                         Chunk Names
31f94cbd02fcc17a07c2.js  930 bytes       0  [emitted] [immutable]  main
Entrypoint main = 31f94cbd02fcc17a07c2.js
[20:18:10] Finished 'js' after 625 ms
gulp js  0.93s user 0.37s system 46% cpu 2.806 total

Webpack stream 5.2.1:
➜  ws-test time gulp js
[20:19:12] Using gulpfile ~/Documents/www/ws-test/gulpfile.js
[20:19:12] Starting 'js'...
[20:19:13] Version: webpack 4.46.0
Built at: 08/30/2021 8:19:13 PM
                  Asset       Size  Chunks                         Chunk Names
31f94cbd02fcc17a07c2.js  930 bytes       0  [emitted] [immutable]  main
Entrypoint main = 31f94cbd02fcc17a07c2.js
[20:19:13] Finished 'js' after 632 ms
gulp js  1.00s user 0.33s system 49% cpu 2.669 total

Webpack stream 7.0.0:
➜  ws-test time gulp js
[20:19:51] Using gulpfile ~/Documents/www/ws-test/gulpfile.js
[20:19:51] Starting 'js'...
[20:19:52] asset main.js 0 bytes [emitted] [minimized] (name: main)

webpack 5.51.1 compiled successfully
[20:19:52] Finished 'js' after 862 ms
gulp js  1.16s user 0.37s system 76% cpu 2.009 total
Drafteed commented 2 years ago

As it turned out, the problem is only when rebuilding through watch:

Webpack stream 5.2.1 (first build):

[18:18:12] Starting 'js'...
[18:18:27] Version: webpack 4.46.0
Built at: 04.10.2021 18:18:27
    Asset      Size  Chunks             Chunk Names
bundle.js  4.99 MiB    main  [emitted]  main
Entrypoint main = bundle.js
[18:18:27] Finished 'js' after 15 s

Webpack stream 5.2.1 (rebuild from watch):

[18:18:54] Starting 'js'...
[18:18:54] Version: webpack 4.46.0
Built at: 04.10.2021 18:18:54
 1 asset
Entrypoint main = bundle.js
[18:18:54] Finished 'js' after 461 ms
[18:18:56] Starting 'js'...
[18:18:56] Version: webpack 4.46.0
Built at: 04.10.2021 18:18:56
 1 asset
Entrypoint main = bundle.js
[18:18:56] Finished 'js' after 215 ms
[18:18:57] Starting 'js'...
[18:18:57] Version: webpack 4.46.0
Built at: 04.10.2021 18:18:57
 1 asset
Entrypoint main = bundle.js
[18:18:57] Finished 'js' after 230 ms
[18:19:02] Starting 'js'...
[18:19:03] Version: webpack 4.46.0
Built at: 04.10.2021 18:19:03
    Asset      Size  Chunks             Chunk Names
bundle.js  4.98 MiB    main  [emitted]  main
Entrypoint main = bundle.js
[18:19:03] Finished 'js' after 471 ms
[18:19:05] Starting 'js'...
[18:19:05] Version: webpack 4.46.0
Built at: 04.10.2021 18:19:05
    Asset      Size  Chunks             Chunk Names
bundle.js  4.99 MiB    main  [emitted]  main
Entrypoint main = bundle.js
[18:19:05] Finished 'js' after 282 ms

Webpack stream 7.0.0 (first build):

[18:23:15] Starting 'js'...
[18:23:29] asset bundle.js 4.49 MiB [emitted] (name: main)

webpack 5.56.1 compiled successfully
[18:23:29] Finished 'js' after 14 s

Webpack stream 7.0.0 (rebuild from watch):

[18:12:37] Starting 'js'...
[18:12:48] asset bundle.js 4.49 MiB [emitted] (name: main)

webpack 5.56.1 compiled successfully
[18:12:48] Finished 'js' after 12 s
[18:15:06] Starting 'js'...
[18:15:18] asset bundle.js 4.49 MiB [emitted] (name: main)

webpack 5.56.1 compiled successfully
[18:15:18] Finished 'js' after 11 s
[18:15:19] Starting 'js'...
[18:15:29] asset bundle.js 4.49 MiB [emitted] (name: main)

webpack 5.56.1 compiled successfully
[18:15:29] Finished 'js' after 9.9 s
[18:15:31] Starting 'js'...
[18:15:41] asset bundle.js 4.49 MiB [emitted] (name: main)

webpack 5.56.1 compiled successfully
[18:15:41] Finished 'js' after 9.52 s

Gulp watch task:

gulp.task('watch', () => {
    gulp.watch(["./src/js/**/*.*"], gulp.series('js'));
});

@shama Any ideas what happened?

Drafteed commented 2 years ago

See in diff between 5 -> 6 and found that cache has been elliminated.

Drafteed commented 2 years ago

Found #207... Any solution of this? Maybe we can add option to enable compilier cache?