Production build is really slow.

[zicsus]

Describe the bug
Production build of scripts is really slow without any significant reason.

To Reproduce
npm run build

Expected behavior
I think than production build should go faster than current speed. There is not generation of source map or anything just same compilation as development with some minification. is the minifaction the issue?
When I just used webpack for compiling, the speeds were significantly faster than current time even when source maps where generated with minifcation.

[zicsus]

@nkrusch any ideas?

[nkrusch]

@zicsus are you using the latest alpha?

If you downgrade does it continue or no?

Also try 1.0.3-alpha.1 let me know if you are seeing same behavior.

[zicsus]

@nkrusch I'm not sure if this problem is recent or old because I noticed when I started compiling large projects. I will take look at latest alpha and let you know.

[nkrusch]

I have two thoughts which I have been thinking about to address this type of issues:

1. Create integration (or system?) tests to test against different configurations to make it easier to identify issues. I mean having various sample project w/ configs and using it to drive the CLI and then check that output is what was expected.

2. secondly benchmark those tests and develop some data around how long it takes to run different configurations and detect degradation, if it happens.

I'm thinking running on tags using CI.

[zicsus]

It persists in latest alpha 1.0.3-alpha.1. I'm also getting warning like this-

The weird part is that development build does not have this warning. Something related to production is causing this.
We also need to take a look at development builds because they are slower than normal webpack setups.

[nkrusch]

Try viewing what is being included in capture.js 6e4035c6674b924a9ff0.js after it builds vs. what should be in included per configs. It seems like it is slow and showing this warning because the generated file is so large.

[zicsus]

@nkrusch capture.js includes some third party (3 packages to be precise) includes but nothing out of ordinary. Even if I remove capture.js, it is still slow build time.

[nkrusch]

next options:

• is it specifically building javascript that is slow, or some other build step(s)? It runs steps sequentially and you can observe the delays of each step in the output. Also compare between dev build to compare differences in timing to say which step(s) in the build are slow.

• backtrack the CLI version to see at which point it becomes slow to identify when the change occurred

• (there are many dependencies) if you identify the lag is with building scripts specifically, I would also check if using different versions of webpack-stream makes any difference.

[nkrusch]

I don't know if you have had a chance to test this further? I am now wondering how much this impacts the build time especially since it sounds like the issues is with prod and not dev:

const webpackOptions = { mode: isProd ? "production" : "development" };

It is the only difference between the two.

[zicsus]

I haven't tested it yet. Webpack might be doing some extra optimations in production mode but its there suggested way. I wonder why it's making so much difference.

[zicsus]

According to this page- https://webpack.js.org/configuration/mode/ changing mode to production brings some additional optimizations.
Files are breaking when doing a production build. I'll remove mode for now.
I also found another solution where we need to just increase the asset size but I'm not sure how practical that would be without custom webpack configs.

[nkrusch]

I was assuming that. If you try building locally, either specifying no mode or dev mode, does that makes any difference in the build time? Trying to figure out the cause of the latency. If it makes no difference then the cause is somewhere else.

[zicsus]

Just tested it and setting mode to development (permanently) and making devtool: none gives really fast build times in production. I will keep devtool: cheap-source-map for development.
Creating a PR in some time.

[zicsus]

Here you go- #54

Can you make a release for this?

[nkrusch]

First, great that this explains the cause!

webpack dev mode does not minifying the source. I believe it concatenates the files. It would explains why 3rd party files build fast.

The flip-side is it does not minify js files in cases where that *is* the desired behavior.

How about best of both worlds and make the mode configurable?

I'm thinking:

  {
    "name": "content_script",
    "src": "./src/*.js",
    "mode": "development"
  }

when the use case is to always use specific mode. If not specified, default to --env flag.