Descriptive naming convention for chunks #6700

kblestarge · 2017-06-15T18:27:56Z

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.

The text was updated successfully, but these errors were encountered:

mjbradford89 · 2017-06-21T23:01:05Z

This is a MUCH needed feature in my opinion.

filipesilva · 2017-06-26T07:42:57Z

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 · 2017-06-26T08:35:25Z

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 · 2017-06-26T10:12:00Z

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

Before: ``` $ ng build --no-progress Hash: ff03df269349b817eef4 Time: 11202ms chunk {0} 0.chunk.js, 0.chunk.js.map 1.61 kB {1} {3} [rendered] chunk {1} 1.chunk.js, 1.chunk.js.map 1.46 kB {0} {3} [rendered] chunk {2} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 160 kB {6} [initial] [rendered] chunk {3} main.bundle.js, main.bundle.js.map (main) 6.38 kB {5} [initial] [rendered] chunk {4} styles.bundle.js, styles.bundle.js.map (styles) 10.5 kB {6} [initial] [rendered] chunk {5} vendor.bundle.js, vendor.bundle.js.map (vendor) 2.16 MB [initial] [rendered] chunk {6} inline.bundle.js, inline.bundle.js.map (inline) 0 bytes [entry] [rendered] ``` After: ``` $ ng build --no-progress Hash: 2bc12a89f40f3b4818b5 Time: 9613ms chunk {feature.module} feature.module.chunk.js, feature.module.chunk.js.map 1.46 kB {lazy.module} {main} [rendered] chunk {inline} inline.bundle.js, inline.bundle.js.map (inline) 0 bytes [entry] [rendered] chunk {lazy.module} lazy.module.chunk.js, lazy.module.chunk.js.map 1.61 kB {feature.module} {main} [rendered] chunk {main} main.bundle.js, main.bundle.js.map (main) 6.38 kB {vendor} [initial] [rendered] chunk {polyfills} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 160 kB {inline} [initial] [rendered] chunk {styles} styles.bundle.js, styles.bundle.js.map (styles) 10.5 kB {inline} [initial] [rendered] chunk {vendor} vendor.bundle.js, vendor.bundle.js.map (vendor) 2.16 MB [initial] [rendered] ``` Fix angular#6700

Before: ``` $ ng build --no-progress Hash: ff03df269349b817eef4 Time: 11202ms chunk {0} 0.chunk.js, 0.chunk.js.map 1.61 kB {1} {3} [rendered] chunk {1} 1.chunk.js, 1.chunk.js.map 1.46 kB {0} {3} [rendered] chunk {2} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 160 kB {6} [initial] [rendered] chunk {3} main.bundle.js, main.bundle.js.map (main) 6.38 kB {5} [initial] [rendered] chunk {4} styles.bundle.js, styles.bundle.js.map (styles) 10.5 kB {6} [initial] [rendered] chunk {5} vendor.bundle.js, vendor.bundle.js.map (vendor) 2.16 MB [initial] [rendered] chunk {6} inline.bundle.js, inline.bundle.js.map (inline) 0 bytes [entry] [rendered] ``` After: ``` $ ng build --no-progress Hash: 2bc12a89f40f3b4818b5 Time: 9613ms chunk {feature.module} feature.module.chunk.js, feature.module.chunk.js.map 1.46 kB {lazy.module} {main} [rendered] chunk {inline} inline.bundle.js, inline.bundle.js.map (inline) 0 bytes [entry] [rendered] chunk {lazy.module} lazy.module.chunk.js, lazy.module.chunk.js.map 1.61 kB {feature.module} {main} [rendered] chunk {main} main.bundle.js, main.bundle.js.map (main) 6.38 kB {vendor} [initial] [rendered] chunk {polyfills} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 160 kB {inline} [initial] [rendered] chunk {styles} styles.bundle.js, styles.bundle.js.map (styles) 10.5 kB {inline} [initial] [rendered] chunk {vendor} vendor.bundle.js, vendor.bundle.js.map (vendor) 2.16 MB [initial] [rendered] ``` Fix #6700

pglazkov · 2017-10-25T12:03:48Z

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 · 2018-04-10T12:50:54Z

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

tavelli · 2018-04-10T13:14:11Z

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

…

On Tue, Apr 10, 2018, 8:51 AM trsh ***@***.***> 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 <#6700 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAdmV2tXjWVVeqKFXVkPekRr6v437-Pxks5tnKrUgaJpZM4N7lA9> .

trsh · 2018-04-10T13:25:22Z

@tavelli tnx

Before: ``` $ ng build --no-progress Hash: ff03df269349b817eef4 Time: 11202ms chunk {0} 0.chunk.js, 0.chunk.js.map 1.61 kB {1} {3} [rendered] chunk {1} 1.chunk.js, 1.chunk.js.map 1.46 kB {0} {3} [rendered] chunk {2} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 160 kB {6} [initial] [rendered] chunk {3} main.bundle.js, main.bundle.js.map (main) 6.38 kB {5} [initial] [rendered] chunk {4} styles.bundle.js, styles.bundle.js.map (styles) 10.5 kB {6} [initial] [rendered] chunk {5} vendor.bundle.js, vendor.bundle.js.map (vendor) 2.16 MB [initial] [rendered] chunk {6} inline.bundle.js, inline.bundle.js.map (inline) 0 bytes [entry] [rendered] ``` After: ``` $ ng build --no-progress Hash: 2bc12a89f40f3b4818b5 Time: 9613ms chunk {feature.module} feature.module.chunk.js, feature.module.chunk.js.map 1.46 kB {lazy.module} {main} [rendered] chunk {inline} inline.bundle.js, inline.bundle.js.map (inline) 0 bytes [entry] [rendered] chunk {lazy.module} lazy.module.chunk.js, lazy.module.chunk.js.map 1.61 kB {feature.module} {main} [rendered] chunk {main} main.bundle.js, main.bundle.js.map (main) 6.38 kB {vendor} [initial] [rendered] chunk {polyfills} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 160 kB {inline} [initial] [rendered] chunk {styles} styles.bundle.js, styles.bundle.js.map (styles) 10.5 kB {inline} [initial] [rendered] chunk {vendor} vendor.bundle.js, vendor.bundle.js.map (vendor) 2.16 MB [initial] [rendered] ``` Fix angular#6700

ghost · 2018-05-08T13:41:15Z

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 · 2018-05-12T20:34:44Z

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 · 2018-05-14T15:25:31Z

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 · 2018-05-14T15:36:00Z

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 · 2018-05-14T15:43:58Z

Perfect!

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

futbolsalas15 · 2019-04-18T18:19:17Z

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 · 2019-04-18T19:04:47Z

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

angular-cli/packages/angular_devkit/build_angular/src/angular-cli-files/models/webpack-configs/typescript.ts

Lines 72 to 78 in 32a096f

    
           if (buildOptions.lazyModules) { 
        
             for (const lazyModule of buildOptions.lazyModules) { 
        
               additionalLazyModules[lazyModule] = path.resolve( 
        
                 root, 
        
                 lazyModule, 
        
               ); 
        
             }

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 · 2019-09-09T11:41:54Z

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.}

Brocco assigned filipesilva Jun 16, 2017

Brocco added P5 The team acknowledges the request but does not plan to address it, it remains open for discussion severity2: inconvenient labels Jun 16, 2017

filipesilva added P1 Impacts a large percentage of users; if a workaround exists it is partial or overly painful and removed P5 The team acknowledges the request but does not plan to address it, it remains open for discussion labels Jun 26, 2017

filipesilva added feature Issue that requests a new feature help wanted labels Jun 26, 2017

filipesilva mentioned this issue Jun 26, 2017

(Feature) Allow customization of output paths/chunk names/output folder structure #5171

Closed

filipesilva mentioned this issue Jul 4, 2017

feat(@angular/cli): name lazy chunks #6881

Merged

hansl closed this as completed in #6881 Jul 5, 2017

angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 9, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Descriptive naming convention for chunks #6700

Descriptive naming convention for chunks #6700

kblestarge commented Jun 15, 2017

mjbradford89 commented Jun 21, 2017

filipesilva commented Jun 26, 2017

PEsteves8 commented Jun 26, 2017

PEsteves8 commented Jun 26, 2017

pglazkov commented Oct 25, 2017

trsh commented Apr 10, 2018

tavelli commented Apr 10, 2018 via email

trsh commented Apr 10, 2018

ghost commented May 8, 2018

clydin commented May 12, 2018

mann-david commented May 14, 2018 •

edited

Loading

clydin commented May 14, 2018

mann-david commented May 14, 2018

futbolsalas15 commented Apr 18, 2019

futbolsalas15 commented Apr 18, 2019 •

edited

Loading

angular-automatic-lock-bot bot commented Sep 9, 2019

Descriptive naming convention for chunks #6700

Descriptive naming convention for chunks #6700

Comments

kblestarge commented Jun 15, 2017

Bug Report or Feature Request (mark with an x)

Desired functionality.

mjbradford89 commented Jun 21, 2017

filipesilva commented Jun 26, 2017

PEsteves8 commented Jun 26, 2017

PEsteves8 commented Jun 26, 2017

pglazkov commented Oct 25, 2017

trsh commented Apr 10, 2018

tavelli commented Apr 10, 2018 via email

trsh commented Apr 10, 2018

ghost commented May 8, 2018

clydin commented May 12, 2018

mann-david commented May 14, 2018 • edited Loading

clydin commented May 14, 2018

mann-david commented May 14, 2018

futbolsalas15 commented Apr 18, 2019

futbolsalas15 commented Apr 18, 2019 • edited Loading

angular-automatic-lock-bot bot commented Sep 9, 2019

Bug Report or Feature Request (mark with an `x`)

mann-david commented May 14, 2018 •

edited

Loading

futbolsalas15 commented Apr 18, 2019 •

edited

Loading