angular-named-lazy-chunks-webpack-plugin
v2.1.0
Published
Webpack plugin that assigns names to the async chunks generated for lazy routes in an Angular app.
Downloads
392
Readme
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.