Is there a plan to provide lazy loading for speed up the startup of the app? i think about wether Webpack hmr or something, using the Ng2 router thus needing to split the dist files in startup and the rest of the app, or maybe lazy loading each part of the app.
Idk a lot of lazy loading but i think this could really improve the UX by speeding up the boot time of the app.
I have noticed this too. The initial startup load time is slower than an empty ionic 1.3 project. On an old Nexus 4 i have to wait 8 seconds before the app starts (with crosswalk , sidemenu template, beta 7).
The speed after the startup is great, but the boot time really need some improvements 
This is something that we have talked about internally and with the angular teams. For the most part, this is where they are focusing on improving with their offline compiler. This should decrease boot time and improve performance speed as well.
Hi @mhartington so the Angular Universal team work will help a lot in the Ionic boot time?
Aside of the rendering speed what about the startup strategies?, say webpack has sort of a lazy loading using require.ensure and chunks, i haven’t dig up that much about it though.
Also in the NgConf 2016 videos in youtube i was watching that angular also has lazy-loading in it’s router, we can’t use it because we use a LIFO stack navigation right? will it ever exists any support for lazy loading modules in Ionic?
Try this:
Sorry but i don’t think this relates to the issue, i think the boot time is slow mostly because Ionic loads all at startup, which means loading modules, plugins, components and services, that’s why i suggested to look at Lazy-loading components, and yes, Angular Universal will help a lot when implemented.
Or maybe you can help me to setup the webworker of this example:
I can’t get to work the webworker…
Sorry but not a lot of web worker experience, i’ll be getting into it this month (maybe) for a new project, if i make it work i’ll help.
Thank you Luchillo, no problem.
About loading time, I did some optimizations and got 417ms loading time.
Look at report Website Speed Test | Pingdom Tools
Good recomendations:
http://blog.angular-university.io/how-to-run-angular-2-in-production-today/22
Creating A Pre-Bootstrap Loading Screen In Angular 2 RC 1
Our site is completely on Ionic2 beta.8
I am going to write tutorial on Built With Archives - Ionic Blog
and on Blog | SherpaDesk
You sure that is an Ionic 2 app? if it is i don’t see it requiring the cordova.js error tha Ionic apps get when in web browsers.
It might be a pwa app. That doesn’t need Cordova i guess
it may be offtopic but
cordova.js is really getting error on gap:// each visit, so to prevent it
I modified cordova.js and added this line after:
;(function() {
var PLATFORM_VERSION_BUILD_LABEL = '4.1.1';
// file: src/scripts/require.js
/*Added \/ Fix for safari and desktop */
if (localStorage.isPhonegap !== "true")
return;
Then in my ios app I set localStorage.isPhonegap = true
and load site http://m.sherpadesk.com/ in webview
it works like charm.
In other cases cordova.js dont executed.
More tricks later on http://www.sherpadesk.com/blog/
to lazy load all libraries just look my app.html code:
function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = "cordova.js";
document.body.appendChild(element);
element = document.createElement("script");
element.src = "build/js/es6-shim.min.js";
document.body.appendChild(element);
element = document.createElement("script");
element.src = "build/js/shims_for_IE.js";
document.body.appendChild(element);
element = document.createElement("script");
element.src = "build/js/Reflect.js";
document.body.appendChild(element);
element = document.createElement("script");
element.src = "build/js/zone.min.js";
document.body.appendChild(element);
element = document.createElement("script");
element.src = "build/js/app.bundle.js";
document.body.appendChild(element);
}
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
quick loading message and lazy load scripts do the job.
Interesting, i see you have an App Shell working and a very small size bundle, i’m curious to see how did you made that, using Browserify as recomended by Ionic staff? or maybe Webpack?
My current bundle has 5.5 Mb without minifying and after minification and other processes i can lower it to 2 Mb, maybe i’m importing more than really needed?
hey @eugenet taking a better look at your downloadJSAtOnload() func, i realize it isn’t exactly what i meant with lazy loading, i meant that pages or routes are loaded on demand, say the Login page is the firs one and all deps are loaded to be able to load it, however after that home page is loaded when logged and thus the images, deps and the page and subcomponents themselves are loaded with the Home page, not with the Login page nor app load.
You’re just loading the deps async, so the onLoad event finishes faster but the overall time shouldn’t change that much.
agree, there is success experiments with webpack, but in russian only (https://habrahabr.ru/post/307694/)
hi, any updates on this ??
Hi
I added techniques:
use loading page
use ServiceWorkers
divide bundle to vendor and app code (to cache vendor.js)
embed templates in js code, no separate server request to HTML template
I got 217ms loading time.
Look at report https://tools.pingdom.com/#!/DW6Td/http://m.sherpadesk.com/9118
I written tutorial on https://www.sherpadesk.com/blog/optimizing-mobile-ionic-2-angular-2-app-for-production
hi, can u explain a bit about use loading page , what do u mean by that ?
also , what service workers to use !
can you provide a link to explain more regarding dividing bundle!