Skip to content
New issue

Have a question about this project?Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to ourterms of serviceand privacy statement.We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

build(docs-infra): use chunk optimizer for adev builds #56830

Closed
wants to merge 1 commit into from

Conversation

clydin
Copy link
Member

@clydin clydin commented Jul 3, 2024

The Angular build system recently introduced an opt-in chunk optimizer for application builds. This is now enabled for adev production builds. It reduces the initial chunk count from 14 to 1 JavaScript file. While the raw initial total file size does increase by 0.75% (+7.3kB), the total estimated transfer size decreases by 8% (-17.8kB). Not only does this reduce the amount of data that must be sent over the network but it also reduces the amount of HTTP requests that must be made by the browser. While the injected HTML module preloads mitigate request cascades, not needing to make the requests is even better.

@angular-robot angular-robot bot added area: build & ci Related the build and CI infrastructure of the project area: docs-infra Angular.dev application and infrastructure labels Jul 3, 2024
@ngbot ngbot bot added this to theBacklogmilestone Jul 3, 2024
Copy link

github-actions bot commented Jul 3, 2024

Deployed adev-preview ford8e9bf2to:https://ng-dev-previews-fw--pr-angular-angular-56830-adev-prev-0oeinkeo.web.app

Note:As new commits are pushed to this pull request, this link is updated after the preview is rebuilt.

@clydin clydin marked this pull request as ready for review July 3, 2024 16:46
@clydin clydin force-pushed the adev/build-chunk-optimize branch from 955d71e to ed6e0e9 Compare July 3, 2024 16:52
@clydin clydin added the action: review The PR is still awaiting reviews from at least one requested reviewer label Jul 3, 2024
@JeanMeche
Copy link
Member

Fwiw,
While I agree seeing less chunks & less kB of js (287kB down to 274 kB) sent,
I'm seeing higher LCP & FCP times with theses changes (4.3s to 5.0s).

Could you check on your side the lighthouse scores with "mobile" selected?

@clydin
Copy link
Member Author

clydin commented Jul 3, 2024

Fromhttps://pagespeed.web.dev,LCP decreased from 6.0 to 5.6 seconds. First time visit will trigger the cookie notification which significantly alters the numbers which is always the case with pagespeed.
When run in devtools, the LCP decreased from 5.0 to 4.7 seconds. FCP did increase from 4.4 to 4.6 seconds though.

Copy link
Member

@josephperrott josephperrott left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others.Learn more.

LGTM

@JeanMeche JeanMeche added action: cleanup The PR is in need of cleanup, either due to needing a rebase or in response to comments from reviews and removed action: review The PR is still awaiting reviews from at least one requested reviewer labels Jul 26, 2024
@JeanMeche
Copy link
Member

Could you please rebase the PR, thank you!

The Angular build system recently introduced an opt-in chunk optimizer
for application builds. This is now enabled for adev production builds.
It reduces the initial chunk count from 14 to 1 JavaScript file. While
the raw initial total file size does increase by 0.75% (7.3kB), the total
estimated transfer size decreases by 8% (17.8kB). Not only does this
reduce the amount of data that must be sent over the network but it also
reduces the amount of HTTP requests that must be made by the browser.
While the injected HTML module preloads mitigate request cascades, not
needing to make the requests is even better.
@JeanMeche JeanMeche added action: merge The PR is ready for merge by the caretaker target: patch This PR is targeted for the next patch release and removed action: cleanup The PR is in need of cleanup, either due to needing a rebase or in response to comments from reviews labels Sep 19, 2024
@pkozlowski-opensource
Copy link
Member

This PR was merged into the repository by commit163f4d0.

The changes were merged into the following branches: main, 18.2.x

pkozlowski-opensource pushed a commit that referenced this pull request Sep 19, 2024
The Angular build system recently introduced an opt-in chunk optimizer
for application builds. This is now enabled for adev production builds.
It reduces the initial chunk count from 14 to 1 JavaScript file. While
the raw initial total file size does increase by 0.75% (7.3kB), the total
estimated transfer size decreases by 8% (17.8kB). Not only does this
reduce the amount of data that must be sent over the network but it also
reduces the amount of HTTP requests that must be made by the browser.
While the injected HTML module preloads mitigate request cascades, not
needing to make the requests is even better.

PRClose#56830
@clydin clydin deleted the adev/build-chunk-optimize branch September 19, 2024 13:42
and-oli pushed a commit to and-oli/angular that referenced this pull request Sep 30, 2024
The Angular build system recently introduced an opt-in chunk optimizer
for application builds. This is now enabled for adev production builds.
It reduces the initial chunk count from 14 to 1 JavaScript file. While
the raw initial total file size does increase by 0.75% (7.3kB), the total
estimated transfer size decreases by 8% (17.8kB). Not only does this
reduce the amount of data that must be sent over the network but it also
reduces the amount of HTTP requests that must be made by the browser.
While the injected HTML module preloads mitigate request cascades, not
needing to make the requests is even better.

PRCloseangular#56830
@angular-automatic-lock-bot
Copy link

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 ourautomatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Oct 20, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
action: merge The PR is ready for merge by the caretaker adev: preview area: build & ci Related the build and CI infrastructure of the project area: docs-infra Angular.dev application and infrastructure target: patch This PR is targeted for the next patch release
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants