Progressive Web Applications (PWAs) have revolutionized the way we build web apps, offering native-like experiences for users. One of the key benefits is the ability to cache static assets locally, providing instant access on subsequent visits. However, this comes with a cost - initial page loads may be slower due to the need to download these assets.

To help developers optimize their Angular applications for production, the Angular team has been working on the Angular mobile-toolkit. However, another significant challenge is the framework size itself. For instance, an unoptimized "Hello world!" Angular application can balloon to 1.4MB in size! This is a major concern when users may be accessing your app via unreliable 3G connections.

In this article, we'll explore the steps necessary to achieve high-performance Angular apps, including minimizing and compressing code, tree-shaking, and more.

Sample Application

To better understand these optimizations, let's first describe our sample application. Our app consists of three files:

  • app.component.ts: A single component with a template rendering the text "Hello world!"
  • app.module.ts: The main module responsible for bootstrapping the application
  • main.ts: The entry point for our application

Our index.html page looks like this:

`html

`

Step 1: Minification and Compression

The first optimization is minification and compression. By reducing the size of our code, we can improve performance and reduce the time it takes to load our app.

To achieve this, we'll use a build script that includes minification:

`json

"scripts": {

"clean": "rm -rf dist",

"serve": "http-server . -p 5556",

"build": "npm run clean && tsc",

"build_prod": "npm run build && browserify -s main dist/main.js > dist/bundle.js && npm run minify",

"minify": "uglifyjs dist/bundle.js --screw-ie8 --compress --mangle --output dist/bundle.min.js"

}

`

Our build script first cleans the dist directory and then compiles our application using TypeScript. We can already run this code in the browser using SystemJS, but to reduce the number of HTTP requests, we'll create a single bundle.

After minifying our code, our bundle size is reduced from 1.4MB to 524KB!

Size Analysis

Let's analyze the size of our bundle:

`bash

$ ls -lah bundle.js

-rw-r--r-- 1 mgechev staff 1.4M Jun 26 12:01 bundle.js

`

As you can see, our initial bundle size is quite large. However, by applying minification, we've reduced the size to:

`bash

$ ls -lah bundle.min.js

-rw-r--r-- 1 mgechev staff 524K Jun 26 12:01 bundle.min.js

`

That's a significant reduction!

Compression

To further reduce our bundle size, let's apply compression using gzip. This will compress the content of our bundle and send it through the network.

The compressed bundle size is:

`bash

$ ls -lah bundle.min.js.gz

-rw-r--r-- 1 mgechev staff 128K Jun 26 12:01 bundle.min.js.gz

`

We've reduced our bundle size by another 75%!

Step 2: Tree-Shaking

In this section, we'll explore tree-shaking, a technique that eliminates unused code and reduces the size of our application.

By applying these optimizations, we can significantly reduce the size of our Angular application and improve its performance. In the next article, we'll dive deeper into additional optimization techniques to further boost our app's speed and efficiency.