End of Barrel Files: New Modularization Techniques with Sheriff

Barrel files (index.ts) are commonly used to define modules and encapsulation but often conflict with tree shaking and code splitting. These optimization techniques are crucial for modern web applications, enabling features like lazy-loaded modules and partial hydration. Unfortunately, barrel files can lead to unnecessarily large bundle sizes, which directly degrade web core vitals.

In my talk, I will first demonstrate this conflict with a specific example showing how barrel files increase bundle sizes. Subsequently, I will showcase Sheriff, a tool that offers an effective solution for modularization without the use of barrel files.

Transcript

1. RainerHahnekamp The End of Barrel Files Rainer Hahnekamp ng-Poland 6. November 2024 New Modularization Techniques with Sheriff
2. RainerHahnekamp About Me... https://www.ng-news.com https://github.com/softarc-consulting/sheriff • Rainer Hahnekamp ANGULARarchitects.io NgRx Team (Trusted Collaborator) • Developer / Trainer / Speaker @RainerHahnekamp Workshops NgRx • Testing • Spring • Quality
3. RainerHahnekamp Agenda • Barrel Files as Module Boundaries ◦ Nx & Sheriff • Tree-Shaking & Barrel Files • Barrel-less Modules in Sheriff
4. RainerHahnekamp Barrel Files as Module Boundaries
5. RainerHahnekamp Main Ingredients for Modules Encapsulation Dependency Rules
6. RainerHahnekamp Shared Forms Grid Error Handling Widgets Backend Middleware ... App Shell Domain (Holidays ) Domain (Customers) Domain (Bookings) Domain (Diary) Layer 1 - Domain modules
7. RainerHahnekamp Domain Feature (Container Cmp.) Data UI (Presentational Cmp.) Domain Models Layer 2 Sub Modules
8. RainerHahnekamp Barrel File 💔 Tree Shaking
9. RainerHahnekamp Application Barrel File (index.ts) Lazy Loaded Chunk (Component, Route,...)
10. RainerHahnekamp Application Lazy Loaded Chunk (Component, Route,...) Bundler
11. RainerHahnekamp Application Lazy Loaded Chunk (Component, Route,...) Bundler
12. RainerHahnekamp Application Lazy Loaded Chunk (Component, Route,...) Bundler
13. RainerHahnekamp Application Lazy Loaded Chunk (Component, Route,...) Bundler Issues with Tree-Shaking
14. RainerHahnekamp Application Lazy Loaded Chunk (Component, Route,...) Bundler Playing it Safe
15. RainerHahnekamp Application Lazy Loaded Chunk (Component, Route,...) Bundler Playing it Safe
16. RainerHahnekamp Application Lazy Loaded Chunk (Component, Route,...) Bundler main.ts
17. RainerHahnekamp Application Lazy Loaded Chunk (Component, Route,...) Bundler main.ts Unoptimized Main Bundle
18. RainerHahnekamp Demo Time
19. RainerHahnekamp Application Barrel File (index.ts) Lazy Loaded Chunk (Component, Route,...)
20. RainerHahnekamp Application Barrel File (index.ts) Lazy Loaded Chunk (Component, Route,...)
21. RainerHahnekamp Application Lazy Loaded Chunk (Component, Route,...)
22. RainerHahnekamp Application Lazy Loaded Chunk (Component, Route,...) Bundler
23. RainerHahnekamp Application Lazy Loaded Chunk (Component, Route,...) Bundler main.ts
24. RainerHahnekamp Application Lazy Loaded Chunk (Component, Route,...) Bundler main.ts Optimized Main Bundle
25. RainerHahnekamp
26. RainerHahnekamp
27. RainerHahnekamp No Encapsulation without Barrels!!!
28. RainerHahnekamp Sheriff: Barrel-less Modules
29. RainerHahnekamp Demo Time
30. RainerHahnekamp Before we end… • Hybrid Mode ◦ Modules as Folder ◦ Nx Libraries ◦ Sheriff for both Barrel-less and Barrel Modules (=Libraries) • Secondary Entry Points for Libraries ◦ Smaller, but multiple "Barrel Files" ◦ Angular Material as Example
31. RainerHahnekamp Thanks