2.5X Smaller Angular 2 Applications with Google Closure Compiler

Thu, 21 Jul 2016 00:00:00 +0000

In the post “Building an Angular 2 Application for Production” we explored how we can decrease the bundle size of a “Hello world!” application to from about 1.6M (non-minified & uncompressed) to 49K! We did this by using the following techniques:

Angular offline template compiler for generating tree-shakable code.
Tree-shaking of ES2015 modules with rollup.
Bundling of the application.
Minification with uglifyjs.
Compression with gzip.

Although we achieved impressive results we can do even better! In this post I’ll show some of the work done by Alex Eagle and Jeff Cross from the Angular core team.

Building an Angular Application for Production

Sun, 26 Jun 2016 00:00:00 +0000

Progressive Web Applications help us build native-like web apps, thanks to amazing tools such as Service Workers, IndexDB, App Shell etc. Once the browser downloads all the static assets required by our app, the active Service Worker can cache them locally.

This way the user may experience slowdown during the initial page load, but each next time she opens the application her experience will be instant!

In order to help developers take advantage of the technologies behind the PWA as easy as possible, the Angular team is working on the Angular mobile-toolkit. However, a big concern for developing high-performance Angular apps is the framework size itself. For instance, a simple non-optimized “Hello world!” Angular application, bundled with browserify is 1.4MB! This is suicidal when your users are supposed to download it via an unreliable 3G connection.

Commonjs on Minko Gechev's blog

2.5X Smaller Angular 2 Applications with Google Closure Compiler

Building an Angular Application for Production