This is the second post in a series by SherpaDesk that about optimizing a fully functional professional service platform solution using Ionic 2 (Angular 2) for our production mobile app. (First Part)
When we started, the original app initially took up to 5-8 seconds to boot. This was way too much time for a mobile app. There was also the need to load several libraries (i.e. Reflect.js, Zone.js).
How to handle javascript
You need to optimize and minimize javascript bundle size. There are many ways to do it.
We used Gulp build system and Browserify. It is a pretty useful bundle of all the required modules that helped us to minimize them.
This is an example of our code:
{
buildBrowserify({
watch: false,
minify: true,
uglifyOptions: {
mangle: false
},
browserifyOptions: {
debug: false, syntax: false // sourcemaps off
}
How to handle CSS
Our way to manage a project with a large amount of CSS is to simply include it externally as a link tag, this has always worked and nothing in Angular 2 prevents us for using it.
But to keep it manageable, a solid choice is to use Sass.
The current version of angular-cli has Sass support, and the Angular 2 material alpha is already using angular-cli to handle their Sass/Css.
Sass is very powerful and there has been a movement (PostCSS) to instead componentize each extension to CSS separately in a plugin architecture. So for example, if we want a feature like CSS file imports, variables or nested styles we can add those one by one.
It's clear that further down the line it will be possible to use Sass easily with Angular, by simply importing .scss files in our component.
Then a build step will transform the Sass into CSS and generate the appropriate source mappings that will allow us to take advantage of the emulated encapsulated mode in a debuggable way.
Then we generate CSS bundle and compress it too with Gulp-Sass.
Our options:
gulp.task('sass', function () {
return gulp.src('./sass/**/*.scss')
.pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
.pipe(gulp.dest('./css'));
});
How to create Pre-Bootstrap Loading Screen
Even after those optimizations an app initial loading time can be more than 1 second.
We got an idea to show a loading screen to prevent user from just watching a blank screen. This prevents the user from feeling like they have accessed a broken app.
We then created simple gif animation elements on page
<div class="loading-spinner"><img src="img/loading2.gif"></div>
We used technology for loading or parsing of javascript on only begin after the page content has loaded, called “deferring javascript”.
Here is a piece of our code:
<script type="text/javascript">
function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = "appbundle.min.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;
</script>
To customize this code:
-
Paste code in your HTML just before the </body> tag (near the bottom of your HTML file).
-
Change the "appbundle.min.js" to the name of your external JS file.
-
Ensure the path to your file is correct. Example: if you just put "appbundle.min.js", then the file "appbundle.min.js" must be in the same folder as your HTML file.
This code will not load the external file you specify until after the document has loaded. Because of this you should not put any javascript in there that is needed for the page to load properly. You should separate your javascript into two groups. One group is the javascript the page needs to load and the the second group is the javascript that is doing stuff after the page loads (i.e like looking for click events). The javascript that can wait until after the page load should be put into one external file that you are calling above.
Read complete guide in next post soon: «Remove a touch response delay»
comments