3

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.

1 Answer 1

3

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'
1
  • So when loading DataClient from ./../core, is it right to imply that it's most optimal to load the single file, as this avoids loading and potentially activating an entire set of modules? Commented Jun 29, 2020 at 16:31

Not the answer you're looking for? Browse other questions tagged or ask your own question.