CODEWITHSUNDEEP
typescriptangular
Daniel Pliscki
Daniel Pliscki

Reputation: 1923

What is the impact of Importing modules using barrels vs specific files on the bundle size?

According to angular 2 style guide, it is a good practice to define a file for each directory that will contain all the imports of the nested files.

I completely agree with that and have already started using this approach.

Now, my questions is:

Is there any impact on the final bundle size depending on each approach I use?

For instance this(Considering that /core has dozens of exportable classes:

import {DataClient} from './../core'

vs this:

import {DataClient} from './../core/interfaces/data.service'

Additionally, what happens for third party libs, like rxjs? Whats the difference between the following snippets?

import {Observable} from 'rxjs'

import {Observable} from 'rxjs/Observable'

I mentioned rxjs because even in angular documentation is advised to import each operator separately.

Upvotes: 3

Views: 1404

Answers (1)

kemsky
kemsky

Reputation: 15270

This will load all exported modules + dependencies from core:

import {DataClient} from './../core'

This will load module data.service (ts file with export/import statement is a module) + dependencies of this module:

import {DataClient} from './../core/interfaces/data.service'

This will load full 'rxjs' library (all operators):

import {Observable} from 'rxjs'

This will load only Observable implementation from rxjs:

import {Observable} from 'rxjs/Observable'

Upvotes: 3

Related Questions