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

Open
wants to merge 1 commit into
base: main
Choose a base branch
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 fored6e0e9to:https://ng-dev-previews-fw--pr-angular-angular-56830-adev-prev-k1z1zg00.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
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.
@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!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
action: cleanup The PR is in need of cleanup, either due to needing a rebase or in response to comments from reviews adev: preview area: build & ci Related the build and CI infrastructure of the project area: docs-infra Angular.dev application and infrastructure
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants