Webpack 3.7.0 and above slow build

[tanzl88]

Short description of the problem:

When webpack is updated to 3.7.0 and above, webpack build step takes much longer time and more memory.

What behavior are you expecting?

Webpack build step should be almost identical after update.

Debug mode ionic serve log. Identical project codes and npm packages except webpack.

Webpack 3.7.1

Webpack step is 1 minute slower and use ~200MB more memory compared to webpack 3.6.0

[22:52:22]  watch started ... MEM: 158.6MB 
[22:52:22]  build dev started ... MEM: 158.7MB 
[22:52:22]  clean started ... MEM: 158.5MB 
[22:52:22]  clean finished in 25 ms MEM: 159.1MB 
[22:52:22]  copy started ... MEM: 159.1MB 
[22:52:23]  deeplinks started ... MEM: 174.3MB 
[22:52:23]  deeplinks finished in 608 ms MEM: 209.4MB 
[22:52:23]  transpile started ... MEM: 209.4MB 
[22:52:29]  transpile finished in 5.86 s MEM: 438.2MB 
[22:52:29]  preprocess started ... MEM: 438.2MB
[22:52:29]  copy finished in 6.81 s MEM: 439.9MB 
[22:52:29]  preprocess finished in 125 ms MEM: 443.7MB 
[22:52:29]  webpack started ... MEM: 443.7MB 
[22:53:48]  webpack finished in 79.33 s MEM: 1206.0MB 
[22:53:48]  sass started ... MEM: 1206.0MB 
[22:53:51]  sass finished in 2.11 s MEM: 1205.2MB 
[22:53:51]  postprocess started ... MEM: 1205.2MB 
[22:53:51]  postprocess finished in 46 ms MEM: 1209.8MB 
[22:53:51]  lint started ... MEM: 1209.8MB 
[22:53:51]  build dev finished in 88.51 s MEM: 1209.9MB ```

Webpack 3.6.0

[22:47:08]  watch started ... MEM: 159.4MB 
[22:47:08]  build dev started ... MEM: 159.5MB  
[22:47:08]  clean started ... MEM: 160.4MB 
[22:47:08]  clean finished in 35 ms MEM: 160.9MB 
[22:47:08]  copy started ... MEM: 160.9MB 
[22:47:09]  deeplinks started ... MEM: 175.4MB 
[22:47:09]  deeplinks finished in 578 ms MEM: 188.9MB 
[22:47:09]  transpile started ... MEM: 188.9MB 
[22:47:15]  transpile finished in 5.50 s MEM: 429.2MB 
[22:47:15]  preprocess started ... MEM: 429.2MB 
[22:47:15]  copy finished in 6.42 s MEM: 429.4MB 
[22:47:15]  preprocess finished in 126 ms MEM: 434.3MB 
[22:47:15]  webpack started ... MEM: 434.3MB 
[22:47:30]  webpack finished in 15.24 s MEM: 1042.8MB 
[22:47:30]  sass started ... MEM: 1042.8MB 
[22:47:32]  sass finished in 1.97 s MEM: 1041.7MB 
[22:47:32]  postprocess started ... MEM: 1041.7MB 
[22:47:32]  postprocess finished in 47 ms MEM: 1045.7MB 
[22:47:32]  lint started ... MEM: 1045.7MB 
[22:47:32]  build dev finished in 23.90 s MEM: 1045.7MB 

Which @ionic/app-scripts version are you using?
3.0.0

[dmastag]

I have the same problem. My production build went from 12 minutes to 26 minutes after upgrading to the new webpack that I got from ionic-app-scripts@3.0.1

[moberwasserlechner]

I have the same problem, with a 70+ module ionic app my build time is around 70s.

But I tried to use Webpack 3.8.1 directly in my dev dependencies, which cuts the build time in half using ionic serve. This is at least better, than before.

Webpack 3.7.1 as transitive dependency.

$ ionic serve
Starting app-scripts server: --address 0.0.0.0 --port 8100 --livereload-port 35729 --dev-logger-port 53703 - Ctrl+C to cancel
[18:52:02]  watch started ...
[18:52:02]  build dev started ...
[18:52:03]  clean started ...
[18:52:03]  clean finished in 3 ms
[18:52:03]  copy started ...
[18:52:03]  deeplinks started ...
[18:52:03]  deeplinks finished in 393 ms
[18:52:03]  transpile started ...
[18:52:08]  transpile finished in 4.94 s
[18:52:08]  preprocess started ...
[18:52:08]  preprocess finished in 1 ms
[18:52:08]  webpack started ...
[18:52:08]  copy finished in 5.59 s
[18:53:14]  webpack finished in 66.34 s
[18:53:14]  sass started ...
[18:53:15]  sass finished in 995 ms
[18:53:15]  postprocess started ...
[18:53:15]  postprocess finished in 104 ms
[18:53:15]  lint started ...
[18:53:15]  build dev finished in 73.01 s
[18:53:16]  watch ready in 73.58 s
[18:53:16]  dev server running: http://localhost:8100/

3.8.1

Starting app-scripts server: --address 0.0.0.0 --port 8100 --livereload-port 35729 --dev-logger-port 53703 - Ctrl+C to cancel
[19:22:28]  watch started ...
[19:22:28]  build dev started ...
[19:22:29]  clean started ...
[19:22:29]  clean finished in 4 ms
[19:22:29]  copy started ...
[19:22:29]  deeplinks started ...
[19:22:29]  deeplinks finished in 395 ms
[19:22:29]  transpile started ...
[19:22:34]  transpile finished in 4.78 s
[19:22:34]  preprocess started ...
[19:22:34]  preprocess finished in 1 ms
[19:22:34]  webpack started ...
[19:22:34]  copy finished in 5.43 s
[19:22:58]  webpack finished in 24.40 s
[19:22:58]  sass started ...
[19:22:59]  sass finished in 946 ms
[19:22:59]  postprocess started ...
[19:22:59]  postprocess finished in 82 ms
[19:22:59]  lint started ...
[19:22:59]  build dev finished in 30.83 s
[19:23:00]  watch ready in 31.30 s
[19:23:00]  dev server running: http://localhost:8100/

ionic info

cli packages: (C:\Users\moberwasserlechner\Development\git\team-conductor-go\node_modules)

    @ionic/cli-utils  : 1.14.0
    ionic (Ionic CLI) : 3.14.0

local packages:

    @ionic/app-scripts : 3.0.1
    Ionic Framework    : ionic-angular 3.7.1

System:

    Node : v6.9.5
    npm  : 3.10.10
    OS   : Windows 10

[dmastag]

A fix for me was using webpack@3.6.0
But since today when updating to ionic-app-script 3.1.0 this is not working anymore, and production build time went from 12 minutes to 30 minutes.

Also I can't do the ionic serve

[dmastag]

I see, since ionic-app-scripts@3.1.0 is dependent on webpack 3.8.1 so adding webpack 3.6.0 separate will not help anymore

[tanzl88]

Hi @danbucholtz, would like to check whether this issue has to wait to be resolved at webpack's end since it is not resolved in the recent app script update? The long build time makes app script unusable.

[dmastag]

@tanzl88 I also opened an issue at the webpack repo

webpack/webpack#5876

They are asking for a repo that has the problem for them to check, but I am sadly not able to reproduce on a new ionic app and can't send my company's app. Do you have a sample repo that you can give them to check?

[danbucholtz]

@tanzl88,

We'll take a look. This is sort of strange. I wonder why that would be. Worst case, I don't see any reason we couldn't go back to 3.6.0 potentially (not sure if that support ModuleConatenationPlugin or not).

Thanks,
Dan

[masimplo]

@dmastag are you usingmax_old_space_size? How much memory do you see used during the build process?
I am only asking because, I was using max_old_space_size in my package.json scripts for ionic:build and server but then was building using ionic cordova build, to which max_old_space_size was not being applied (I realised after looking to mem usage during build) and was having the same behaviour. Running ionic cordova build with a larger max_old_space_size than the used memory, returned my build process to its previous acceptable performance levels.

[mlynch]

@dmastag your build was 12 minutes? How?!

[dmastag]

@masimplo yes, actually I am
Here is an excerpt from webpack/webpack#5876 (comment)

ionic serve takes a long time and in windows Task manager the amount of memory does not go above 750MB

But on 3.6.0 it can go up to 1.3GB and is working in 2 minutes to load my app.

So are you suggesting that I set the --max-old-space-size=4096 to a higher value?
But this would only be for production builds, any advice on ionic serve?

@mlynch correct

The following are the builds using gitlab-ci

Using webpack@3.6.0

Using webpack@3.8.1

[mlynch]

That's crazy. Are you doing anything special? What does your app look like (i.e. anything that would cause builds to be that slow)?

[dmastag]

Not sure, I have 238 lazy loaded IonicPages
and the packages and app.modules that I use have nothing special
Gist to app.module.ts and package.json

Though this app has been using ionic since angular 2.0.0-rc.4 and ionic-angular 2.0.0-beta.11
But I am sure to upgrade every time based on the release notes

[mlynch]

@dmastag okay that explains it 😅 Why so many pages? Could probably cut down on it if you generalize them somehow, but I don't know your app