Angular Named Lazy Chunks Webpack Plugin

Assigns names to the async chunks generated by Webpack for lazy routes in an Angular app.

Example:

app.module.ts

export const ROUTES: Routes = [
  { path: '', component: HomeComponent },
  { path: 'gallery', loadChildren: './gallery/gallery.module#GalleryModule' },
  { path: 'about', loadChildren: './about/about.module#AboutModule' }
];

@NgModule({
  imports: [RouterModule.forRoot(ROUTES)],
  declarations: [AppComponent]
})
export class AppModule { }

Webpack build output without the AngularNamedLazyChunksWebpackPlugin:

                        Asset     Size  Chunks           
    0.155b2d62f27ec0c62c13.js  3.92 kB       0  [emitted]
    1.5d938dc52f1919e39aa9.js  3.82 kB       2  [emitted]
  app.9d8bb980840d155d8745.js  13.1 kB       4  [emitted]
                 polyfills.js   6.9 kB       7  [emitted]
                    vendor.js  8.38 kB       9  [emitted]

Webpack build output with the plugin:

                              Asset     Size  Chunks           
    gallery.155b2d62f27ec0c62c13.js  3.92 kB       0  [emitted]
      about.5d938dc52f1919e39aa9.js  3.82 kB       2  [emitted]
        app.9d8bb980840d155d8745.js  13.1 kB       4  [emitted]
                       polyfills.js   6.9 kB       7  [emitted]
                          vendor.js  8.38 kB       9  [emitted]

Installation

$ npm install --save-dev angular-named-lazy-chunks-webpack-plugin

Usage

webpack.config.js

const AngularNamedLazyChunksWebpackPlugin = require('angular-named-lazy-chunks-webpack-plugin');

module.exports = {
  ...
  plugins: [
    ...
    new AngularNamedLazyChunksWebpackPlugin()
  ]
}

Options

{
  // Default: false
  // Set to "true" if you have multiple apps built with one Webpack config and 
  // the build output goes to one folder. In this case the plugin will try to
  // determine the name of the app based on the page to the module (see 
  // "appNameRegex" option) and prefix the chank name with the app name (e.g.
  // app1.gallery.155b2d62f27ec0c62c13.js).
  multiAppMode: boolean,

  // Default: "apps(\\\/|\\\\)(.*?)(\\\/|\\\\)"
  // When "multiAppMode" is set to "true" this regular expression is used for
  // extracting the name of the app from the module file path.
  // E.g. if you have the following file structure:
  // apps/
  //   app1/
  //     module1
  //     module2
  //   app2/
  //     module1
  //     module2
  // The chunks will be named "app1.module1.15..c13.js", 
  // "app2.module1.9d...745.js", etc.
  // 
  // Note: If a custom regex expression is provide, the name of the app is assumed to be the first match group in that regex.
  appNameRegex: string,
  
  // A function that returns the name of the chunk based on the file path of the lazy module.
  // If this function is specified then "multiAppMode" and "appNameRegex" are ignored.   
  nameResolver: (filePath: string) => string | null
}

Credit

Full credit goes to Angular CLI, where this plugin was originally introduced.

This package includes a few tweaks (like multi-app support) and makes it available for Angular apps that are not based on Angular CLI and instead use custom Webpack config.