ng-samurai — Schematics to improve tree shaking of Angular libraries

Angular schematics to split your library into multiple chunks with ng-packagr’s subentries

The Game of thrones wiki library

|_ arya-stark
|_ arya-stark.{component, module, etc...}
|_ bran-stark
|_ cercei-lannister
|_ jaime-lannister
|_ john-snow
|_ lannisters
|_ robb-stark
|_ starks
|_ tyrion-lannister
|_ tywin-lannister

Analyze tree shaking for the got-wiki library

The GOT-wiki library used inside an application.
The webpack bundle analyzer nicely illustrates that the four characters are lazy-loaded — each character ends up in a separate chunk.
A chunk that contains all modules from the got-wiki library

Ng-Samurai — split your library into multiple subentries

npm i -D ng-samurai


ng g ng-samurai:split-lib
ng-samurai:split-lib updates our library and splits it into multiple chunks

Build with subentries

The output of a production build that creates multiple entry points
Each module ends up as a separate fesm2015 bundle
Lazy loaded feature module with a tree shakable library — the library code is now split into lazy-loaded chunks.

ng-samurai allows you to get huge optimizations with one command! 💪

Restrictions of ng-samurai

Valid approach for ng-samurai to know how to create subentries — each module will result in a subentry
This will not work — each module will be converted to a subentry. Subentries can not contain subentries.
ng-samurai needs a module.ts file to be present to know where to create the subentry

Creating new features with ng-samurai

ng g ng-samurai:generate-subentry


🧞‍ 🙏 If you liked this post, share it and give some claps👏🏻 by clicking multiple times on the clap button on the left side.

Passionate freelance frontend engineer. ❤️ Always eager to learn, share and expand knowledge.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store