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
;
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 = ; moduleexports = ... plugins: ...
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. 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.