Despite significant technological advancements, many users still access web applications under poor network conditions. As developers, it’s our responsibility to ensure that our apps are functional in such environments. One effective approach to reducing long loading times is optimizing and minimizing the app's bundle size.
🤔 When Should You Consider Optimizations?
If there's a likelihood that users will access your app on slow networks, optimizing the bundle size should be a crucial part of the development. Loading times not only affect user experience but also play a crucial role in your app's SEO performance.
For applications where SEO is a key factor, dedicating time to analyze and reduce the bundle size is a valuable investment. Note that if you're working on an internal application like an advanced dashboard, you don't need a good SEO in most cases.
📦 What to Optimize
Start with the Initial Bundle The initial bundle is the most critical part of optimizing the app.
Split Lazy-Loaded Chunks Split large lazy-loaded chunks into smaller, more manageable pieces that can be individually lazy-loaded, enhancing overall loading efficiency. However, avoid over-splitting, as too many small chunks can introduce unnecessary overhead.
Exclude Rarely Used Code Consider deferring the loading of rarely used code (e.g., “no records found” views or state actions).
📖 Learn More About Bundle Size Optimization
To dive deeper into bundle size optimization, check out my article outlining a step-by-step approach to streamlining your application bundle.
You’ll learn:
- Why a smaller app bundle matters
- How to analyze your application bundle effectively
- Strategies to reduce and split bundle files
- And much more! 😄
👉 Read the full article: How to Optimize Your Angular Bundle Size
⚠️ BONUS: Use Barrel Files with Caution
Barrel files 🛢️ (index.ts) have never been fully tree-shakable, which can lead to performance issues in CI pipelines and larger-than-expected bundles. To minimize these risks, limit the use of barrels only to entry points in your code.
If working in an NX monorepository, consider dividing your application into small, individual libraries. This approach ensures predictable tree-shaking and results in more optimized application builds.
For a deeper dive into barrel files and their limitations, check out this 🔗GitHub issue, which provides valuable insights on lazy-loading libraries with barrel file entrypoint.