ionic serve will take anywhere from 30 seconds to 3 minutes to compile and prepare to serve changes on every change. Is this normal or is something wrong with my setup? I’m using Typescript btw.
The same for me. Very slow and not loaded into the browser (chrome).
although the project is built.
So I must stop the server and restart it.
system information:
Cordova CLI: 6.0.0
Ionic2 Version: 2.0.0-beta.22
Ionic CLI Version: v2.0.0-beta.22
Gulp version: CLI version 3.9.1
Node Version: v0.12.7
OS: Windows 10pro.
Thanks
I experience this issue as well with blank typescript project created via
ionic start myApp blank --v2 --typescript
The recompile time is cca 10 seconds.
With another project which already has cca 15 screens and components, the recompile time is around 30-40 seconds.
Cordova CLI: 5.3.3
Gulp version: CLI version 3.9.1
Gulp local: Local version 3.9.1
Ionic Version: 2.0.0-beta.6
Ionic CLI Version: 2.0.0-beta.22
Ionic App Lib Version: 2.0.0-beta.12
OS: Distributor ID: Ubuntu Description: Ubuntu 14.04.3 LTS
Node Version: v0.12.7
I tried most of the options of webpack devtool option but it has no impact on compile time.
Actually, what are the compile times we expect from ionic serve? Maybe also other people struggle with 10s reload time, but they find it normal. Personally I believe the reload time should take no more than 100ms for medium size app (up to 30 screens), taking into account the power of nowadays CPUs and amount of RAM (e.g. intel core i3 and 8GB of ram in my case).
If using webpack means you’re using the ionic-gulp-webpack package? today i updated that one and the compile time drop from 40s first and 28s consecutive ones, to 17s first and 5~6s consecutive ones, try updating that one.
thanks for response.
I found this line in package.json:
"ionic-gulp-webpack-build": "^1.0.0",
so it seems I use the latest version of ionic-gulp-webpack-build.
There also exists npm package called ionic-gulp-webpack, it is published by the same developer and I cannot determine what is the difference between the two packages (in terms of functionality).
Out of curiosity I replaced
"ionic-gulp-webpack-build": "^1.0.0",
with
"ionic-gulp-webpack": "2.0.0"
but the compile times are ~ the same.
Maybe is the version of the ionic framework you’re using, i reverted to beta.6 and the compile time went up again even after updating the ionic-gulp-webpack plugin, if you can try the update and see if that improves the compile time.
Same Problem here! i think the problem was present also in beta.6
Not sure if there’s something similar for Webpack but for Browserify you could disable the sourcemaps to speed-up the rebuilds:
Setting
options.browserifyOptions.debugtofalsewill disable sourcemaps and drastically speed up your rebuilds when watching.
I’m struggling with painfully slow compile times and would like to speed things up. But there doesn’t appear to be a gulpfile.js in new ionic 2 projects. Where would this option be set if not in a gulpfile? Thx
I wanted to chime in here with a possible solution and hopefully someone from the ionic team can give their input. I sped up my compile time to about 1 second by splitting the www/build/main.js bundle into 2 files, one called core.js containing all the angular, ionic, and any other libraries used in your app and then a app.js file containing JUST the code from the project’s src/ directory. app.js is small compared to core.js which is a couple MB. This way we’re not having to bundle up all the angular, ionic, 3rd party library javascript that never changes as your developing your app every single time we make a change to a file in our src/ directory. Only app.js is regenerated on file modification. And then I include both core.js and app.js in index.html.
I used 3 separate rollup config files under node_modules/@ionic/app-scripts/config/ to get this done. One for creating the core.js, another for app.js, and the other needed for generating www/build/main.css. I had to use the “external” and “globals” rollup feature to accomplish all this. Not sure if this is the right way to go about this, but it seems to work with the tabs starter project.
1 Like
Andresa8, thanks for this. I commented out the line
//'./**/*.d.ts',
in ngc.config.js and that sped things up significantly.I can’t figure out how to split things up like you did though. Do you mind sharing your setup?
Many thanks
It seems like a really great solution.
Could you please share with us how you did it ?
@evandillon did commenting out the line in ngc.config have any side effects e.g. templates not update etc?
Care to share, suffering here!
1 Like
@fabrizio5680 i have updated my app-scripts to version .39 and has seen great improvement in terms of ionic serve. maybe you can try it out as well.
1 Like
Brilliant, huge improvement, thanks!
How is the performance of ionic serve command with “@ionic/app-scripts”: “0.0.48”, or “@ionic/app-scripts”: “0.0.47”,?
I am experiencing very slow.
@andresa88
Could you please share how to achieve this?
I am using 2.0.0 . Where is ngc.config.js ?
I only see ./node_modules/@ionic/app-scripts/dist/ngc.js and ngc.d.ts
I’m quite sure angular-cli does the same thing @andresa88 proposes. In fact i believe it’s separated in at least 6 files and the speed of reload it’s a huge difference with ionic serv
I would like to know if the development team is looking at this or not (@max), just to know.
Thanks!
1 Like