Minification and Tree Shaking in Angular

Introduction

Minification and tree shaking are two important techniques used in Angular (and other web development frameworks) to streamline and optimize code for optimal performance.

These techniques help reduce the size of your application, which is crucial for faster load times and better user experience. Let's delve into each of these processes in the context of Angular:

1. What is Minification?

Minification is the process of removing unnecessary characters from your code, such as whitespace, and comments, and renaming variables to shorter names. This reduces the size of your code files, leading to faster download times. Angular applications are typically written in TypeScript, which is then transpiled to JavaScript. The minification process is applied to the resulting JavaScript code.

Here's how you can enable minification in Angular.

A. Production Build

Angular CLI provides a build command that you can use to build your production application. When you build for production, the Angular CLI automatically applies minification.

ng build --prod

This command generates a production-ready bundle with minified and optimized code.

B. Terser Plugin

The Terser plugin, used for minification in Angular, comes with various configuration options. You can customize the minification process by providing options in your angular.json file.

"architect": {
  "build": {
    "options": {
      "optimization": true,
      "outputPath": "dist/my-app",
      "terserOptions": {
        "compress": {
          "pure_funcs": ["console.log"],
          "drop_console": true
        },
        "mangle": true
      }
    }
  }
}

In the example above, the pure_funcs option is used to specify functions that are pure and can be safely removed. The drop_console option removes all console statements, and mangle is set to true to obfuscate variable names.

C. Angular AOT (Ahead-of-Time) Compilation

Angular applications can be compiled in either JIT (Just-In-Time) or AOT (Ahead-Of-Time) mode. AOT compilation is preferred for production builds as it allows for better tree shaking and optimization. It compiles Angular templates and components during the build process, resulting in smaller bundle sizes.

You can enable AOT compilation by default in your tsconfig.json.

"angularCompilerOptions": {
  "fullTemplateTypeCheck": true,
  "strictInjectionParameters": true
}

2. What is Tree Shaking?

Tree shaking is the process of eliminating dead (unused) code from your application. It helps remove any modules or code that are not being utilized, resulting in a smaller bundle size.

A. Module Configuration

Ensure that your Angular modules are organized in a way that allows for effective tree shaking. Modules should have clear boundaries and dependencies. Avoid unnecessary inter-module dependencies to facilitate the removal of unused code.

B. Static Analysis

Tree shaking works best with static analysis, so try to avoid dynamic imports or any runtime code that prevents the build tool from determining which parts of the code are used.

C. Production Mode

Similar to minification, tree shaking is most effective in production builds. When you run the production build using the --prod flag, Angular CLI automatically enables tree shaking.

ng build --prod

D. Angular Dependency Injection

Angular's dependency injection system can sometimes interfere with tree shaking. Avoid injecting services or components that are not being used in a particular module. This ensures that the unused services are not included in the final bundle.

E. Angular Ivy Renderer

Angular Ivy, the new rendering engine introduced in Angular 9, brings improvements to tree shaking. It provides better static analysis capabilities, resulting in more effective dead code elimination during the build process.

Webpack Configuration (for Advanced Users):

If you need more control over the build process, you can customize the webpack configuration used by Angular CLI. This involves ejecting the webpack configuration, which generates a webpack.config.js file in your project. Use this file to fine-tune various aspects of the build process, including optimization and code splitting.

To eject the webpack configuration

ng eject

Keep in mind that ejecting is irreversible, and you'll be responsible for maintaining the webpack configuration.

Conclusion

In conclusion, optimizing Angular applications involves a combination of minification and tree shaking. Configuring options for Terser, enabling AOT compilation, organizing modules effectively, and understanding the limitations of tree shaking are key aspects of achieving optimal performance. Always test thoroughly to ensure that the optimizations do not impact the functionality of your application.