Where do I do this excactly?
Iām not sure that tuning build system will speedup soooo much loading time. For that reason people use server side rendering for initial view for ng2 apps.
To prevent server requests to templates
I use gulp-angular-embed-templates to embed all templates in ts files:
I do:
gulp prod
additional code for gulpfile is:
var embedTemplates = require('gulp-angular-embed-templates');
gulp.task('prod', function(done){
runSequence(
['sass', 'html', 'fonts'],
'move1',
'clean1',
'embed',
'compile',
'clean2',
'move2',
'clean3'
);});
gulp.task('move1', function(done){
return gulp.src(['./app/**/*.*'], { base: './app/' })
.pipe(gulp.dest('__app'));
});
gulp.task('clean1', function(done){
return del('app');
});
gulp.task('clean2', function(done){
return del('app');
});
gulp.task('move2', function(done){
// the base option sets the relative root for the set of files,
// preserving the folder structure
return gulp.src(['./__app/**/*.*'], { base: './__app/' })
.pipe(gulp.dest('app'));
});
gulp.task('clean3', function(done){
return del('__app');
});
gulp.task('embed', function (done) {
return gulp.src('__app/**/*.ts') // also can use *.js files
.pipe(embedTemplates({sourceType:'ts', basePath: 'www/', minimize: { quotes: true }}))
.pipe(gulp.dest('./app'));
});
gulp.task('compile', function(done){
runSequence(
['scripts'],
function(){
buildBrowserify({
watch: false,
minify: true,
uglifyOptions: {
mangle: false
},
browserifyOptions: {
debug: false, syntax: false // sourcemaps off
},
tsifyOptions: { noImplicitAny: false, allowSyntheticDefaultImports: true, removeComments: true, skipDefaultLibCheck: true, target: "ES5"} }).on('end', done);
}
);
});
1 Like
I agree, but we can do more today, not just waiting for future
I donāt see why template request matters since the templates are packaged with the code, maybe if youāre talking about deploying an Ionic 2 app as a web site.
Itās critical to shrink the size of app.bundle.js, my understanding was that every kilobyte of JS code took 1ms to parse and execute so if my app.bundle.js is 3MB, parsing it could take 3 seconds which is a big chunk of time for mobile interaction.
1 Like
Maybe youāre talking about STC (Static Template Compilation) instead of just embedding the templates?
Also if that ā1 ms to parseā is about web, in mobile itāll be slower due to Ram and CPU constraints, doesnāt it?
Desktop browsers are quicker than mobile browsers - 1ms. I saw this measurements somewhere on the internet but Iām sure a 200k JS file and a 2MB JS file can have a huge difference. I hope Angular 2ās tree shaking stuff gets ready faster.
I donāt think templates matter either, my bet is on Angularās zoneJS and various other clever stuff.
Hey @eugenet how fast does your app load on mobile phones?
417ms with Ioinc beta sounds awesome.
I tested blank ionic apps on different phones and they seems to always load in around 3s, no matter how slow or fast the phone is.
I guess thatās because single thread performance on Android is equally bad on budget as well as flagships.
instantly,
you can check store links on http://www.sherpadesk.com/sherpadesk-triples-perfomance-with-new-progressive-web-app/
our app is completely loaded in webview from site http://m.sherpadesk.com/
@luchillo17, @itlr cause all content stored on remote site its important to limit server request to templates in my case to prevent additional delays and jerky app
When you say that your app is loaded from site to webview it means that your ionic app is just a webview container that loads the real app from server?
Also iām unable to drop size under 2.2 Mb even after minification and treeshaking.
Yes, itās true. real app is on server completely
Soo youāre even using ionic components?
What about plugins, do the cordova.js is downloaded from web or something like that?
Do plugins like databases works ok?
@eugenet thx for the effort documenting your solution for boot time, really interesting.
You achieve to have a really fast boot time by loading each time your app content from a server right, I understand correctly.
So didnāt you win application boot time to loose time afterwards when your app has to load the content of your application ? Respectively, at the end, didnāt your app start quickly but the user canāt straightly use it because the content has to be load? Or did you find a solution there where youāre caching the app ācontentā the first time it will be loaded?
I also guess heās caching the files, be it with a cache manifest, intercepting and caching the request in the app-cache with service-workers or just setting the http caching strategy, anyway thereās no point in having the app wrapper if he doesnāt cache the files somewhere.
If he really doesnāt then why not just using the normal browser with an app manifest, it would look like a native app and work just the same with less disk space used since it would be using the already installed browser (unless he needs native stuff like calendar, camera or something not available to mobile browser.
All content loaded from server when app starts first, but then webview cache all files cause itās single page site.
This cache (and app) destroyed only when user kill app from app switcher (which is rare) or reboot phone.
If I want to update app, I check version with api call and if new available, I ask user to confirm update (just reload webview).
@luchillo17 I dont use app-cache and service-workers now
but maybe use later
thx for your answer @eugenet. this solutions looks good but may be not the solution in my case because Iāve got many pages and services. Iām a little bit āconcernedā that instead of having that delay on app start I will have it afterwards ā¦ but well if I donāt find any other solutions I will have to try
Hey how do you manage to use it like a browser? do you use the cordova-plugin-inappbrowser or something less complex?
With the release of Beta 11, the Ionic team announced some great news regarding the loading time which should be delivered with Beta 12!
http://blog.ionic.io/announcing-ionic-2-beta-11/
So wait and see
After upgrading to beta.11. app.bundle.js shrinks from 9M+ to 4M, this seems to have helped a lot.