Optimizing Angular Imports with Import Cost Extension

Hey everyone!

I’ve been using the Import Cost extension in VS Code, and it’s been incredibly helpful in managing the size of my library imports.

// Importing from 'rxjs/operators'
import { filter, map } from 'rxjs/operators'; // 104k

// Importing individually from 'rxjs/internal/operators'
import { filter } from 'rxjs/internal/operators/filter'; // 11.1k 
import { map } from 'rxjs/internal/operators/map'; // 11.1k        

The difference in size is significant!

Angular offers multiple ways to import, such as:

1. import { filter } from 'rxjs';
2. import { filter } from 'rxjs/operators';
3. import { filter } from 'rxjs/internal/operators/filter';

Choosing the right import method can drastically reduce your bundle size. The Import Cost extension helps you make informed decisions by showing the size of each import right in your editor.

If you’re looking to optimize your Angular app, give this extension a try!