function "statsToString" only prints the size of the first file

[EmaGht]

🐞 Bug report

Command (mark with an x)

• new
• build
• serve
• test
• e2e
• generate
• add
• update
• lint
• xi18n
• run
• config
• help
• version
• doc

Is this a regression?

No

Description

I'm CLI-izing an old application and to do so, i've set up the build target with
@angular-builders/custom-webpack:browser
My webpack.config.js emits the main_client.js together with an initial.css,
when this happens, the Angular-CLI function statsToString only prints the size of the first file it encounters like so:

function statsToString(json, statsConfig) {
    const colors = statsConfig.colors;
    const rs = (x) => colors ? reset(x) : x;
    const w = (x) => colors ? bold(white(x)) : x;
    const changedChunksStats = json.chunks
        .filter((chunk) => chunk.rendered)
        .map((chunk) => {
//@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
//Notice "chunk.files[0]"
        const asset = json.assets.filter((x) => x.name == chunk.files[0])[0];
//@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
        return generateBundleStats({ ...chunk, size: asset && asset.size }, colors);
    });

which generates this not-so-good report where the sizes are 73KB for initial.css and around 8MB for main-client.js

.
.
.
chunk {main-client} initial.css, main-client.js (main-client) 73 kB [entry] [rendered]

Now, i know i'm not supposed to use my own webpack with the CLI etc.. etc.. etc.. but since the logger actually prints all initial file's names i would assume it would also sum their sizes?

Still, the build is somehow working and I'm already quite happy about that, but if you guys could fix up the size count of the initial chunk, that would be terrific! :)

Thanks!

[filipesilva]

That's indeed not great :(

I'm surprised it took this long to come up too!

Would you be interested in taking a look?

[EmaGht]

I'll try to take a look at it!
I'm pretty sure i will need a pointer or two when i get to the testing side of the matter but until then... wish me good luck :D

[filipesilva]

I don't think we have a good way of testing this change...

If I were looking into this, I'd first start with a real project that I know is doing the wrong thing. Then I'd go directly into node modules and change the code to do the right thing. Then I'd make a PR with those changes, and put in the PR message a before and after screenshot.

Rather informal but I think that's what we did the last few times we changes the logging format.

[clydin]

Can you also provide an example webpack configuration that exhibits the issue described above?

[EmaGht]

@filipesilva Ok
@clydin Ok
I'll see to put something together before the weekend

-Edit
I actually found a couple of minutes to put a hopefully-decent Pull Request together:
#16734

[angular-automatic-lock-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.}