Huge number of files generated for every Angular project

javascript

optimization

performance

angular

byAlex Kataev·Oct 19, 2024

Minimize the scaffolding of Angular project using the command:
```
ng new my-project --minimal
```

Utilize lazy loading for modules; it will help combat bloating:

loadChildren: () => import('./feature.module').then(m => m.FeatureModule)

Delete or prune unused assets binary or manual check:
```
npm prune
```
Visualize your bundle to identify bigger files, perfect tool for the job is Webpack Bundle Analyzer:
```
npx webpack-bundle-analyzer stats.json
```

These steps streamline Angular projects, balancing efficiency and simplicity.

Streamline your dependencies

Trim your dependencies down by checking on package.json file. Any bloat could be an unnecessary npm package; hence remove it or replace it with a lighter option.

Adopt optimization tools

Minimize JavaScript files using tools like YUI Compressor or Google Closure Compiler. These tools trim down the file size by removing whitespace, deleting comments, and renaming variables to terser versions. Your bandwidth will thank you.

Apply HTTP/2

HTTP/2 offers header compression and request multiplexing, reducing HTTP request latency and hence better performance regardless of the file number. Two birds, one stone, right?

Visualization

Angular is a carpenter's table—plenty of unique tools.

🛠️  Toolbox: [🖼️ frames, 🔩 screws, 🗝️ keys, 🚪 doors, 🪟 windows]

Every Angular project is a chest full of treasures:

💼  Chest: [🛠️🛠️🛠️🛠️🛠️🛠️🛠️🛠️]

Each file represents a unique tool:

📂  Files: [Components wrench 🛠️, Modules hammer 🔨, Services screwdriver🔧, ...]

Don't freak out, every tool or file in your project is a step to constructing your masterpiece!

🔨  Every file is an essential tool for your app's construction.

Stay calm and code on! 🚀

Gaining insights into the build process

A deeper look into the build process shows that ng build --prod command which uses webpack turns many files into a few optimized bundles.

In the browser battle of optimizing performance, two superheroes emerge: Tree-shaking and Ahead-of-Time (AOT) compilation.

Tree-shaking: A superhero that shakes off the extra, unused code (not leaves, though 🍃😉)
AOT: Compiles HTML and TypeScript into JavaScript before the browser loads the app. Faster rendering!

Streamlining deployment

When getting your application ready for deployment, only the artifacts built in the dist/ folder are needed.

Scripts, styles and assets—all can be significantly reduced and neatly packed into a minimum number of files.

Keeping Angular up-to-date

Remember to keep your Angular CLI updated. Newer updates come with newer optimizations. This can reduce file count and boost overall performance. Plus, it keeps your app safe and secure. Just a tiny bit of gardening on your part! 🌷

explain-codes / Javascript / Huge number of files generated for every Angular project

Linked

Single huge .css file vs. multiple smaller specific .css files?



Managing jQuery plugin dependency in webpack



Why is it a bad practice to return generated HTML instead of JSON? Or is it?



What is the meaning of the "at" (@) prefix on npm packages?



What is the most efficient way to deep clone an object in JavaScript?

