โก ๐๐ฎ๐๐ ๐ฏ๐๐ถ๐น๐ฑ๐ ๐ฑ๐ผ๐ป'๐ ๐ฎ๐๐๐ผ๐บ๐ฎ๐๐ถ๐ฐ๐ฎ๐น๐น๐ ๐ฐ๐ฟ๐ฒ๐ฎ๐๐ฒ ๐ณ๐ฎ๐๐ ๐ฎ๐ฝ๐ฝ๐น๐ถ๐ฐ๐ฎ๐๐ถ๐ผ๐ป๐.
@angular's new build system is a huge win for developer productivity. Build times are dramatically faster, making the development experience better than ever.
But there's another side to the story.
In large applications, the new bundling strategy can produce hundreds of small
@JavaScript chunks. While that helps the bundler optimize build speed, it can significantly increase the number of network requests during page loadโand those requests still have a cost, even with HTTP/2 and HTTP/3.
In our tests, simply increasing the number of additional chunks from ๐ผ ๐๐ผ ๐ฑ๐ฌ๐ฌ increased ๐๐ฎ๐ฟ๐ด๐ฒ๐๐ ๐๐ผ๐ป๐๐ฒ๐ป๐๐ณ๐๐น ๐ฃ๐ฎ๐ถ๐ป๐ (๐๐๐ฃ) from ๐ฎ.๐ต๐ฑ ๐ ๐๐ผ ๐ฑ.๐ณ๐ต ๐โwithout increasing the amount of JavaScript or changing the rendered content.
That led us to a question:
๐๐ฎ๐ป ๐๐ฒ ๐ธ๐ฒ๐ฒ๐ฝ ๐๐๐ฏ๐๐ถ๐น๐ฑ'๐ ๐ถ๐ป๐ฐ๐ฟ๐ฒ๐ฑ๐ถ๐ฏ๐น๐ฒ ๐ฏ๐๐ถ๐น๐ฑ ๐๐ฝ๐ฒ๐ฒ๐ฑ ๐๐ต๐ถ๐น๐ฒ ๐ฝ๐ฟ๐ผ๐ฑ๐๐ฐ๐ถ๐ป๐ด ๐ฎ ๐ฏ๐๐ป๐ฑ๐น๐ฒ ๐๐ต๐ฎ๐'๐ ๐ผ๐ฝ๐๐ถ๐บ๐ถ๐๐ฒ๐ฑ ๐ณ๐ผ๐ฟ ๐ฟ๐๐ป๐๐ถ๐บ๐ฒ ๐ฝ๐ฒ๐ฟ๐ณ๐ผ๐ฟ๐บ๐ฎ๐ป๐ฐ๐ฒ?
In our latest article we explore:
โ
Why chunk count matters more than many developers realize
โ
Why Angular's new build system produces so many chunks
โ
Why HTTP/2 doesn't make requests "free"
โ
Reachability-based bundle optimization strategies
โ
How we built
@rx-angular/rebundle to optimize Angular production bundles
If you're working on a large Angular application, this is worth understanding.
๐ ๐ฅ๐ฒ๐ฎ๐ฑ ๐๐ต๐ฒ ๐ณ๐๐น๐น ๐ฎ๐ฟ๐๐ถ๐ฐ๐น๐ฒ:
push-based.io/article/fasterโฆ
#Angular #Performance #WebPerformance #JavaScript #Esbuild #CoreWebVitals #WebDev