Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
Drafteed opened this issue Apr 19, 2021 · 4 comments
Closed

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

Drafteed opened this issue Apr 19, 2021 · 4 comments

Comments

@Drafteed
Copy link

Drafteed commented Apr 19, 2021

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
Copy link
Owner

shama commented Aug 31, 2021

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

@shama shama closed this as completed Aug 31, 2021
@Drafteed
Copy link
Author

Drafteed commented Oct 4, 2021

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
Copy link
Author

Drafteed commented Oct 4, 2021

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

@Drafteed
Copy link
Author

Drafteed commented Oct 4, 2021

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants