Ionic-app-scripts: webpack 10x slower from v1.3.0(6 sec) to v1.3.4(70 sec)

Created on 26 Apr 2017  ·  11Comments  ·  Source: ionic-team/ionic-app-scripts

Note: for support questions, please use one of these channels:

https://forum.ionicframework.com/
http://ionicworldwide.herokuapp.com/

Short description of the problem:

I switched from v1.3.0 to v1.3.4 and webpack build time increased from 6 sec to 70 sec as shown below.

What behavior are you expecting?

Faster webpack build in latest version.

Steps to reproduce:

  1. Clone https://github.com/aggarwalankush/ionic2-mosum
  2. Build with app-scripts v1.3.0 and v1.3.4

v1.3.0

Anku@Ankushs-MacBook-Pro:ionic2-mosum$ ionic build ios --prod

> ionic2-mosum@ ionic:build /Users/Anku/Documents/IdeaProjects/ionic2-mosum
> ionic-app-scripts build "--prod"

[20:03:19]  ionic-app-scripts 1.3.0 
[20:03:19]  build prod started ... 
[20:03:19]  clean started ... 
[20:03:19]  clean finished in 2 ms 
[20:03:19]  copy started ... 
[20:03:19]  ngc started ... 
[20:03:28]  ngc finished in 9.01 s 
[20:03:28]  preprocess started ... 
[20:03:28]  deeplinks started ... 
[20:03:29]  deeplinks finished in 375 ms 
[20:03:29]  optimization started ... 
[20:03:29]  copy finished in 9.51 s 
[20:03:38]  optimization finished in 9.15 s 
[20:03:38]  preprocess finished in 9.53 s 
[20:03:38]  webpack started ... 
[20:03:44]  webpack finished in 6.21 s 
[20:03:44]  sass started ... 
[20:03:44]  uglifyjs started ... 
[20:03:45]  sass finished in 1.00 s 
[20:03:45]  cleancss started ... 
[20:03:46]  cleancss finished in 1.11 s 
WARN: Output exceeds 32000 characters
[20:04:04]  uglifyjs finished in 19.73 s 
[20:04:04]  postprocess started ... 
[20:04:04]  postprocess finished in 19 ms 
[20:04:04]  lint started ... 
[20:04:04]  build prod finished in 44.53 s 
[20:04:06]  lint finished in 2.02 s 
Building project: /Users/Anku/Documents/IdeaProjects/ionic2-mosum/platforms/ios/Mosum.xcworkspace

v1.3.4

Anku@Ankushs-MacBook-Pro:ionic2-mosum$ ionic build ios --prod

> ionic2-mosum@ ionic:build /Users/Anku/Documents/IdeaProjects/ionic2-mosum
> ionic-app-scripts build "--prod"

[20:07:51]  ionic-app-scripts 1.3.4 
[20:07:51]  build prod started ... 
[20:07:51]  clean started ... 
[20:07:51]  clean finished in 2 ms 
[20:07:51]  copy started ... 
[20:07:51]  ngc started ... 
[20:08:01]  ngc finished in 9.46 s 
[20:08:01]  preprocess started ... 
[20:08:01]  deeplinks started ... 
[20:08:01]  deeplinks finished in 381 ms 
[20:08:01]  optimization started ... 
[20:08:01]  copy finished in 9.98 s 
[20:08:12]  optimization finished in 10.74 s 
[20:08:12]  preprocess finished in 11.12 s 
[20:08:12]  webpack started ... 
[20:09:22]  webpack finished in 69.70 s 
[20:09:22]  sass started ... 
[20:09:22]  uglifyjs started ... 
[20:09:23]  sass finished in 1.05 s 
[20:09:23]  cleancss started ... 
[20:09:24]  cleancss finished in 1.17 s 
WARN: Output exceeds 32000 characters
[20:09:42]  uglifyjs finished in 20.25 s 
[20:09:42]  postprocess started ... 
[20:09:42]  postprocess finished in 40 ms 
[20:09:42]  lint started ... 
[20:09:42]  build prod finished in 110.59 s 
[20:09:44]  lint finished in 1.99 s 
Building project: /Users/Anku/Documents/IdeaProjects/ionic2-mosum/platforms/ios/Mosum.xcworkspace

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

Other information: (e.g. stacktraces, related issues, suggestions how to fix, stackoverflow links, forum links, etc)

picture aggarwalankush
👍1

Most helpful comment

@danbucholtz Setting following makes the build process ultra fast again :)

  "config": {
    "ionic_build_to_es5": false
  }

Would you mind telling the effect of using this flag? Is it safe to not build to es5 as some browser might not fully support es6? Do I need to disable this flag in --prod build?

picture aggarwalankush on 28 Apr 2017
👍2

All 11 comments

Try nightly. We achieved what we wanted to achieve in 1.3.4 but it is definitely slow. nightly will be much faster for all non-prod builds. Still slow for prod builds.

Thanks,
Dan

danbucholtz picture danbucholtz on 26 Apr 2017

nightly is still slow for non-prod(60 sec) and prod is failing :( Attaching ionic-info as well, might be it can help in debugging.

non-prod slow

Anku@Ankushs-MacBook-Pro:ionic2-mosum$ ionic build ios

> ionic2-mosum@ ionic:build /Users/Anku/Documents/IdeaProjects/ionic2-mosum
> ionic-app-scripts build

[20:28:16]  ionic-app-scripts 1.3.4-201704241624 
[20:28:16]  build dev started ... 
[20:28:16]  clean started ... 
[20:28:16]  clean finished in 1 ms 
[20:28:16]  copy started ... 
[20:28:16]  transpile started ... 
[20:28:19]  transpile finished in 2.67 s 
[20:28:19]  preprocess started ... 
[20:28:19]  deeplinks started ... 
[20:28:19]  deeplinks finished in 99 ms 
[20:28:19]  preprocess finished in 99 ms 
[20:28:19]  webpack started ... 
[20:28:19]  copy finished in 2.89 s 
[20:29:17]  webpack finished in 58.27 s 
[20:29:17]  sass started ... 
[20:29:18]  sass finished in 798 ms 
[20:29:18]  postprocess started ... 
[20:29:18]  postprocess finished in 1 ms 
[20:29:18]  lint started ... 
[20:29:18]  build dev finished in 61.88 s 
[20:29:20]  lint finished in 1.95 s 
Building project: /Users/Anku/Documents/IdeaProjects/ionic2-mosum/platforms/ios/Mosum.xcworkspace

Prod failing

Anku@Ankushs-MacBook-Pro:ionic2-mosum$ ionic build ios --prod

> ionic2-mosum@ ionic:build /Users/Anku/Documents/IdeaProjects/ionic2-mosum
> ionic-app-scripts build "--prod"

[20:24:41]  ionic-app-scripts 1.3.4-201704241624 
[20:24:41]  build prod started ... 
[20:24:41]  clean started ... 
[20:24:41]  clean finished in 2 ms 
[20:24:41]  copy started ... 
[20:24:41]  ngc started ... 
[20:24:49]  ngc finished in 8.34 s 
[20:24:49]  preprocess started ... 
[20:24:49]  deeplinks started ... 
[20:24:50]  deeplinks finished in 356 ms 
[20:24:50]  optimization started ... 
[20:24:50]  copy finished in 8.84 s 
[20:24:54]  ionic-app-script task: "build" 
[20:24:54]  Error: ./src/pages/settings/settings.module.ngfactory.ts Module parse failed: 
            /Users/Anku/Documents/IdeaProjects/ionic2-mosum/node_modules/@ionic/app-scripts/dist/webpack/optimization-loader.js!/Users/Anku/Documents/IdeaProjects/ionic2-mosum/src/pages/settings/settings.module.ngfactory.ts
            Unexpected token (74:66) You may need an appropriate loader to handle this file type. | import * as import63 
            from './settings'; | import * as import64 from 'ionic-angular/util/module-loader'; | class 
            SettingsPageModuleInjector extends import0.ɵNgModuleInjector<import1.SettingsPageModule> { | 
            _CommonModule_0:import2.CommonModule; | _ɵba_1:import3.ɵba; @ ./src async @ 
            ./~/ionic-angular/util/ng-module-loader.js @ ./src/app/app.module.ngfactory.js @ 
            ./src/app/main.ts,./src/pages/tabs/tabs.module.ngfactory.ts Module parse failed: 
            /Users/Anku/Documents/IdeaProjects/ionic2-mosum/node_modules/@ionic/app-scripts/dist/webpack/optimization-loader.js!/Users/Anku/Documents/IdeaProjects/ionic2-mosum/src/pages/tabs/tabs.module.ngfactory.ts
            Unexpected token (74:62) You may need an appropriate loader to handle this file type. | import * as import63 
            from './tabs'; | import * as import64 from 'ionic-angular/util/module-loader'; | class 
            TabsPageModuleInjector extends import0.ɵNgModuleInjector<import1.TabsPageModule> { | 
            _CommonModule_0:import2.CommonModule; | _ɵba_1:import3.ɵba; @ ./src async @ 
            ./~/ionic-angular/util/ng-module-loader.js @ ./src/app/app.module.ngfactory.js @ 
            ./src/app/main.ts,./src/pages/weather-detail/weather-detail.module.ngfactory.ts Module parse failed: 
            /Users/Anku/Documents/IdeaProjects/ionic2-mosum/node_modules/@ionic/app-scripts/dist/webpack/optimization-loader.js!/Users/Anku/Documents/IdeaProjects/ionic2-mosum/src/pages/weather-detail/weather-detail.module.ngfactory.ts
            Unexpected token (74:71) You may need an appropriate loader to handle this file type. | import * as import63 
            from './weather-detail'; | import * as import64 from 'ionic-angular/util/module-loader'; | class 
            WeatherDetailPageModuleInjector extends import0.ɵNgModuleInjector<import1.WeatherDetailPageModule> { | 
            _CommonModule_0:import2.CommonModule; | _ɵba_1:import3.ɵba; @ ./src async @ 
            ./~/ionic-angular/util/ng-module-loader.js @ ./src/app/app.module.ngfactory.js @ 
            ./src/app/main.ts,./src/pages/world-weather/world-weather.module.ngfactory.ts Module parse failed: 
            /Users/Anku/Documents/IdeaProjects/ionic2-mosum/node_modules/@ionic/app-scripts/dist/webpack/optimization-loader.js!/Users/Anku/Documents/IdeaProjects/ionic2-mosum/src/pages/world-weather/world-weather.module.ngfactory.ts
            Unexpected token (74:70) You may need an appropriate loader to handle this file type. | import * as import63 
            from './world-weather'; | import * as import64 from 'ionic-angular/util/module-loader'; | class 
            WorldWeatherPageModuleInjector extends import0.ɵNgModuleInjector<import1.WorldWeatherPageModule> { | 
            _CommonModule_0:import2.CommonModule; | _ɵba_1:import3.ɵba; @ ./src async @ 
            ./~/ionic-angular/util/ng-module-loader.js @ ./src/app/app.module.ngfactory.js @ ./src/app/main.ts 
Error: ./src/pages/settings/settings.module.ngfactory.ts
Module parse failed: /Users/Anku/Documents/IdeaProjects/ionic2-mosum/node_modules/@ionic/app-scripts/dist/webpack/optimization-loader.js!/Users/Anku/Documents/IdeaProjects/ionic2-mosum/src/pages/settings/settings.module.ngfactory.ts Unexpected token (74:66)
You may need an appropriate loader to handle this file type.
| import * as import63 from './settings';
| import * as import64 from 'ionic-angular/util/module-loader';
| class SettingsPageModuleInjector extends import0.ɵNgModuleInjector<import1.SettingsPageModule> {
|   _CommonModule_0:import2.CommonModule;
|   _ɵba_1:import3.ɵba;
 @ ./src async
 @ ./~/ionic-angular/util/ng-module-loader.js
 @ ./src/app/app.module.ngfactory.js
 @ ./src/app/main.ts,./src/pages/tabs/tabs.module.ngfactory.ts
Module parse failed: /Users/Anku/Documents/IdeaProjects/ionic2-mosum/node_modules/@ionic/app-scripts/dist/webpack/optimization-loader.js!/Users/Anku/Documents/IdeaProjects/ionic2-mosum/src/pages/tabs/tabs.module.ngfactory.ts Unexpected token (74:62)
You may need an appropriate loader to handle this file type.
| import * as import63 from './tabs';
| import * as import64 from 'ionic-angular/util/module-loader';
| class TabsPageModuleInjector extends import0.ɵNgModuleInjector<import1.TabsPageModule> {
|   _CommonModule_0:import2.CommonModule;
|   _ɵba_1:import3.ɵba;
 @ ./src async
 @ ./~/ionic-angular/util/ng-module-loader.js
 @ ./src/app/app.module.ngfactory.js
 @ ./src/app/main.ts,./src/pages/weather-detail/weather-detail.module.ngfactory.ts
Module parse failed: /Users/Anku/Documents/IdeaProjects/ionic2-mosum/node_modules/@ionic/app-scripts/dist/webpack/optimization-loader.js!/Users/Anku/Documents/IdeaProjects/ionic2-mosum/src/pages/weather-detail/weather-detail.module.ngfactory.ts Unexpected token (74:71)
You may need an appropriate loader to handle this file type.
| import * as import63 from './weather-detail';
| import * as import64 from 'ionic-angular/util/module-loader';
| class WeatherDetailPageModuleInjector extends import0.ɵNgModuleInjector<import1.WeatherDetailPageModule> {
|   _CommonModule_0:import2.CommonModule;
|   _ɵba_1:import3.ɵba;
 @ ./src async
 @ ./~/ionic-angular/util/ng-module-loader.js
 @ ./src/app/app.module.ngfactory.js
 @ ./src/app/main.ts,./src/pages/world-weather/world-weather.module.ngfactory.ts
Module parse failed: /Users/Anku/Documents/IdeaProjects/ionic2-mosum/node_modules/@ionic/app-scripts/dist/webpack/optimization-loader.js!/Users/Anku/Documents/IdeaProjects/ionic2-mosum/src/pages/world-weather/world-weather.module.ngfactory.ts Unexpected token (74:70)
You may need an appropriate loader to handle this file type.
| import * as import63 from './world-weather';
| import * as import64 from 'ionic-angular/util/module-loader';
| class WorldWeatherPageModuleInjector extends import0.ɵNgModuleInjector<import1.WorldWeatherPageModule> {
|   _CommonModule_0:import2.CommonModule;
|   _ɵba_1:import3.ɵba;
 @ ./src async
 @ ./~/ionic-angular/util/ng-module-loader.js
 @ ./src/app/app.module.ngfactory.js
 @ ./src/app/main.ts
    at new BuildError (/Users/Anku/Documents/IdeaProjects/ionic2-mosum/node_modules/@ionic/app-scripts/dist/util/errors.js:16:28)
    at /Users/Anku/Documents/IdeaProjects/ionic2-mosum/node_modules/@ionic/app-scripts/dist/preprocess.js:18:21
    at process._tickCallback (internal/process/next_tick.js:103:7)

npm ERR! Darwin 16.5.0
npm ERR! argv "/usr/local/Cellar/node/7.3.0/bin/node" "/usr/local/bin/npm" "run" "ionic:build" "--" "--prod"
npm ERR! node v7.3.0
npm ERR! npm  v4.0.5
npm ERR! code ELIFECYCLE
npm ERR! ionic2-mosum@ ionic:build: `ionic-app-scripts build "--prod"`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the ionic2-mosum@ ionic:build script 'ionic-app-scripts build "--prod"'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the ionic2-mosum package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     ionic-app-scripts build "--prod"
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs ionic2-mosum
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls ionic2-mosum
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /Users/Anku/Documents/IdeaProjects/ionic2-mosum/npm-debug.log

Ionic info

Anku@Ankushs-MacBook-Pro:ionic2-mosum$ ionic info

Your system information:

Cordova CLI: 6.5.0 
Ionic Framework Version: 3.0.1
Ionic CLI Version: 2.2.3
Ionic App Lib Version: 2.2.1
Ionic App Scripts Version: 1.3.4-201704241624
ios-deploy version: 1.9.1 
ios-sim version: 5.0.13 
OS: macOS Sierra
Node Version: v7.3.0
Xcode version: Xcode 8.3.2 Build version 8E2002
aggarwalankush picture aggarwalankush on 26 Apr 2017

The same error!

nicobytes picture nicobytes on 27 Apr 2017
👎1 👍1

Same error, i think i open an issue in the wrong place, but...
https://github.com/driftyco/ionic/issues/11388

rodrigoreal picture rodrigoreal on 27 Apr 2017

Try nightly. npm install @ionic/app-scripts@nightly. A PR introduced this issue, sorry. I'll publish a fix today.

Thanks,
Dan

danbucholtz picture danbucholtz on 27 Apr 2017

non-prod still slow (60sec) but the good thing is --prod is working in nightly. I don't care about source map and stuff, can I do anything to get the faster build? Setting source map to eval fails as mentioned here https://github.com/driftyco/ionic-app-scripts#tips

non-prod

Anku@Ankushs-MacBook-Pro:ionic2-mosum$ ionic build ios

> ionic2-mosum@ ionic:build /Users/Anku/Documents/IdeaProjects/ionic2-mosum
> ionic-app-scripts build

[09:10:29]  ionic-app-scripts 1.3.5-201704271445 
[09:10:29]  build dev started ... 
[09:10:29]  clean started ... 
[09:10:29]  clean finished in 3 ms 
[09:10:29]  copy started ... 
[09:10:29]  transpile started ... 
[09:10:32]  transpile finished in 2.76 s 
[09:10:32]  preprocess started ... 
[09:10:32]  deeplinks started ... 
[09:10:32]  deeplinks finished in 92 ms 
[09:10:32]  preprocess finished in 94 ms 
[09:10:32]  webpack started ... 
[09:10:32]  copy finished in 3.00 s 
[09:11:31]  webpack finished in 59.44 s 
[09:11:31]  sass started ... 
[09:11:32]  sass finished in 859 ms 
[09:11:32]  postprocess started ... 
[09:11:32]  postprocess finished in 1 ms 
[09:11:32]  lint started ... 
[09:11:32]  build dev finished in 63.19 s 
[09:11:34]  lint finished in 1.90 s 
Building project: /Users/Anku/Documents/IdeaProjects/ionic2-mosum/platforms/ios/Mosum.xcworkspace

prod

Anku@Ankushs-MacBook-Pro:ionic2-mosum$ ionic build ios --prod

> ionic2-mosum@ ionic:build /Users/Anku/Documents/IdeaProjects/ionic2-mosum
> ionic-app-scripts build "--prod"

[09:13:15]  ionic-app-scripts 1.3.5-201704271445 
[09:13:15]  build prod started ... 
[09:13:15]  clean started ... 
[09:13:15]  clean finished in 4 ms 
[09:13:15]  copy started ... 
[09:13:15]  ngc started ... 
[09:13:24]  ngc finished in 8.73 s 
[09:13:24]  preprocess started ... 
[09:13:24]  deeplinks started ... 
[09:13:24]  deeplinks finished in 373 ms 
[09:13:24]  optimization started ... 
[09:13:24]  copy finished in 9.23 s 
[09:13:33]  optimization finished in 8.88 s 
[09:13:33]  preprocess finished in 9.26 s 
[09:13:33]  webpack started ... 
[09:14:33]  webpack finished in 60.05 s 
[09:14:33]  sass started ... 
[09:14:33]  uglifyjs started ... 
[09:14:34]  sass finished in 1.14 s 
[09:14:34]  cleancss started ... 
[09:14:35]  cleancss finished in 1.03 s 
WARN: Output exceeds 32000 characters
[09:14:51]  uglifyjs finished in 18.21 s 
[09:14:51]  postprocess started ... 
[09:14:51]  postprocess finished in 2 ms 
[09:14:51]  lint started ... 
[09:14:51]  build prod finished in 96.28 s 
[09:14:53]  lint finished in 1.92 s 
Building project: /Users/Anku/Documents/IdeaProjects/ionic2-mosum/platforms/ios/Mosum.xcworkspace
aggarwalankush picture aggarwalankush on 27 Apr 2017

@aggarwalankush,

There is a setting to build_to_es5. Check out the readme and you can turn it off.

Thanks,
Dan

danbucholtz picture danbucholtz on 28 Apr 2017

@danbucholtz Setting following makes the build process ultra fast again :)

  "config": {
    "ionic_build_to_es5": false
  }

Would you mind telling the effect of using this flag? Is it safe to not build to es5 as some browser might not fully support es6? Do I need to disable this flag in --prod build?

aggarwalankush picture aggarwalankush on 28 Apr 2017
👍2

@danbucholtz I've set "ionic_build_to_es5": false in package.json but build & serve does not seems "fast".

How do I check if it's disabled or not? Can you add it to build log?

Here is my build log:

$ ionic serve browser
Starting app-scripts server: --port 8100 --livereload-port 35729 --address 0.0.0.0

[20:09:03]  watch started ... 
[20:09:03]  build dev started ... 
[20:09:03]  clean started ... 
[20:09:03]  clean finished in 2 ms 
[20:09:03]  copy started ... 
[20:09:03]  transpile started ... 
[20:09:10]  transpile finished in 6.74 s 
[20:09:10]  preprocess started ... 
[20:09:10]  deeplinks started ... 
[20:09:11]  deeplinks finished in 993 ms 
[20:09:11]  preprocess finished in 995 ms 
[20:09:11]  webpack started ... 
[20:09:12]  copy finished in 8.58 s 
[20:09:49]  webpack finished in 37.91 s 
[20:09:49]  sass started ... 
[20:09:51]  sass finished in 2.12 s 
[20:09:51]  postprocess started ... 
[20:09:51]  postprocess finished in 8 ms 
[20:09:51]  lint started ... 
[20:09:51]  build dev finished in 47.85 s 
[20:09:51]  watch ready in 47.98 s 
[20:09:51]  dev server running: http://localhost:8100/ 

[20:10:02]  lint finished in 10.97 s

@aggarwalankush is your numbers better?

trakhimenok picture trakhimenok on 29 Apr 2017

@astec Yes, setting config makes it as fast as v1.3.0 

$ ionic serve browser

> [email protected] ionic:serve /Users/Anku/Documents/IdeaProjects/ionic2-mosum
> ionic-app-scripts serve "--v2" "--address" "0.0.0.0" "--port" "8100" "--livereload-port" "35730"

[12:24:54]  ionic-app-scripts 1.3.6 
[12:24:54]  watch started ... 
[12:24:54]  build dev started ... 
[12:24:54]  clean started ... 
[12:24:54]  clean finished in 4 ms 
[12:24:54]  copy started ... 
[12:24:54]  transpile started ... 
[12:24:56]  transpile finished in 2.33 s 
[12:24:56]  preprocess started ... 
[12:24:56]  deeplinks started ... 
[12:24:56]  deeplinks finished in 99 ms 
[12:24:56]  preprocess finished in 100 ms 
[12:24:56]  webpack started ... 
[12:24:56]  copy finished in 2.53 s 
[12:25:04]  webpack finished in 8.07 s 
[12:25:04]  sass started ... 
[12:25:05]  sass finished in 1.05 s 
[12:25:05]  postprocess started ... 
[12:25:05]  postprocess finished in 8 ms 
[12:25:05]  lint started ... 
[12:25:05]  build dev finished in 11.60 s 
[12:25:05]  watch ready in 11.66 s 
[12:25:05]  dev server running: http://localhost:8100/ 

[12:25:08]  lint finished in 2.91 s
aggarwalankush picture aggarwalankush on 29 Apr 2017

This is resolved for all non-prod builds.

Thanks,
Dan

danbucholtz picture danbucholtz on 4 May 2017
Was this page helpful?
0 / 5 - 0 ratings

Related issues

Manduro picture Manduro  ·  62Comments
squallliu picture squallliu  ·  62Comments
ihadeed picture ihadeed  ·  97Comments
jgw96 picture jgw96  ·  65Comments
ValterSantosMatos picture ValterSantosMatos  ·  63Comments