Angular-cli: Descriptive naming convention for chunks

[kblestarge]

Bug Report or Feature Request (mark with an x)

- [ ] bug report -> please search issues before submitting
- [x] feature request

Desired functionality.

Currently, when I build out my project with ng build or ng build --prod, I see something like this:

It tells me how large my chunks and bundles are which is helpful. I can then turn this information into a useful visual to get a better understanding of what exactly is in each bundle or chunk using the source-map-explorer or the webpack-bundle-analyzer. However, it's kind of difficult to tell which chunk is coming from which lazy-loaded module.

I think it would be wise to include the name of the module in the file name somehow.
for example: instead of 0.9c59d5dde120b62746c2.chunk.js it would be AdminModule.0.9c59d5dde120b62746c2.chunk.js

This feature would be helpful when trying to understand the module architecture of your application.

[mjbradford89]

This is a MUCH needed feature in my opinion.

[filipesilva]

I don't know of a way off the top of my head but webpack 2.4 (https://github.com/webpack/webpack/releases/tag/v2.4.0) has some new features regarding naming modules and perhaps that can be used.

[PEsteves8]

At least syntax-wise for the router paths, angular-router-loader seems to have a nice approach:

https://github.com/brandonroberts/angular-router-loader/blob/master/docs/options.md#lazy-loading-options

(easily allowing for file names and paths)

[PEsteves8]

(Unless there's a commitment to avoid mixing cli specific features with angular syntax)

[pglazkov]

There is now also a standalone Webpack plugin that can be used in non-Angular CLI projects with a custom Webpack config: https://github.com/Independer/angular-named-lazy-chunks-webpack-plugin

I also created an issue to either to use that package in @angular/cli or pull the plugin into one of the @angular-devkit packages.

[trsh]

How it's done for lazy modules? Im still getting 1,2,3

[tavelli]

Use the --named-chunks flag during build. ng build --named-chunks

On Tue, Apr 10, 2018, 8:51 AM trsh [e-mail] wrote:

How it's done for lazy modules? Im still getting 1,2,3

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/angular/angular-cli/issues/6700#issuecomment-380086776,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAdmV2tXjWVVeqKFXVkPekRr6v437-Pxks5tnKrUgaJpZM4N7lA9
.

[trsh]

@tavelli tnx

[manndave]

From the "you can't please everyone" department...now that the CLI (apparently?) does this by default (includes the module name in the chunk filename), I need the exact opposite - I want my filenames to be just generic guids, or something equally inscrutable. Without ejecting webpack, is there any way to go about this?

Thanks.

[clydin]

The named chunks option is what you’re looking for to handle that situation. It is disabled by default in a new project for production builds, so no action is typically required.

[mann-david]

I'm using a new CLI project, but still in a dev build. Getting names like "myModule.chunk.js". I'd rather have something like "12345.chunk.js" where "12345" is a random number or guid or such.

If I enable the named chunks option, can I specify my own names or have it generate random names. If randomly generated names is out, I could settle for me just assigning fixed meaningless names. If so, how do I enable named chunks?

Thx.

PS: Just realized I replied here using my work GH account...I'm still "manndave" :-(

[clydin]

If you are see names such as myModule.chunk.js then the option is enabled (it defaults to enabled). If you are seeing numbers (e.g., 0.chunk.js) then the option is disabled (default for production configuration in new projects).

[mann-david]

Perfect!

Thanks, that is exactly what I need. I guess you can please everyone... :-)

[futbolsalas15]

Continue what @mann-david said,

If I enable the named chunks option, can I specify my own names or have it generate random names

Is it possible to add a custom name to the chunks? Currently if I use the option lazyModules in _angular.json_ it adds all the path to the module:

It should be a little practical in this case set only the short name (e.g. Module Name).

[futbolsalas15]

Ok, I see. The problem with setting a custom name is in the following lines

https://github.com/angular/angular-cli/blob/32a096f3f084fd58719d9009be4ff1d6666b6565/packages/angular_devkit/build_angular/src/angular-cli-files/models/webpack-configs/typescript.ts#L72-L78

The paths setted in lazyModule are also used as names of the lazy module. Should we add a new feature that the lazyModule could be an array object instead of a string array, or detect both cases (for back compatibility)? e.g.:

{
...
"lazyModule": [
{"name": "rich-text-editor", "path": "src/.../.../rich-text-editor.module.ts"}
]
...
}

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}