Angular Chunk Files Explained | Generated by AI

Home 2026.03

Question: What are chunk-xxx.js files in Angular Compiler CLI?

Answer:

What is chunk-xxx.js in Angular?

Overview

chunk-xxx.js (e.g., chunk-ABC123.js, 0.chunk.js, common.chunk.js) are JavaScript bundle fragments generated by Angular’s build toolchain during the compilation process. Chunks aren’t technically part of Angular itself — they are part of Webpack (or esbuild in newer Angular versions), which Angular uses internally to build your application. When the toolchain transpiles TypeScript files into JavaScript, it creates “chunks” which represent parts of your application.

Why Do Chunks Exist?

Angular’s build system performs code splitting — instead of bundling your entire app into a single JS file, it breaks code into smaller pieces (“chunks”) that can be loaded separately. This improves performance by:

Types of Chunk Files

1. Lazy-Loaded Module Chunks

The easiest way to apply lazy loading is to use Angular Router’s built-in functionality with loadChildren. Based on the import() statement used, Webpack knows how to split the JS files so they can be loaded on an as-needed basis. When you serve or compile your application, you will see these code-split JS files (chunks) printed out on the console.

For example:

products-products-module.js
orders-orders.module.js

2. Common Chunk (common.js)

As soon as you have some shared piece — a shared module with components used by both the products and orders lazy-loaded modules — the Angular CLI by default groups all shared code (used in at least two locations) into a common.js chunk. This is usually a good idea in that shared code is de-duplicated. However, keep in mind that this JS file is loaded at startup, which may influence your app’s startup speed.

The common chunk is a place for all the things that more than one of your feature modules use. For example, if you have a custom grid component in a custom grid module and you import this grid module into both your user and admin feature modules, it ends up in the common chunk.

3. Named/Hash Chunks (e.g., chunk-XXXXX.js)

After Angular was upgraded to version 16 and the builder @angular-devkit/build-angular:browser-esbuild is used, chunk-xxx.js files are added compared to earlier versions. These files have non-fixed names, so static file references cannot be matched easily.

Controlling Chunk Behavior

You can control the common chunk via angular.json:

{
  "architect": {
    "build": {
      "options": {
        "commonChunk": true
      }
    }
  }
}

If in your specific scenario you’re better off duplicating some code, you can set commonChunk to false in the angular.json config to avoid generating the common.js file. Be careful though — this means that shared code is duplicated throughout the lazy-loaded JS files, so choose wisely based on your situation.

What’s Inside a Chunk?

Angular and the CLI wrap module code via Webpack and JSONP so that it can be loaded and executed from the server. A lazy-loaded chunk contains the compiled component, its template, and its module registration.

Summary Table

Chunk Type Example Name Contents
Lazy module chunk auth.module.chunk.js Code for a lazy-loaded feature module
Common chunk common.js Shared code between 2+ lazy modules
Hash chunk (esbuild) chunk-ABC123.js Split output from esbuild bundler
Named chunk 0.chunk.js Unnamed/numbered lazy split

References:

Back Donate