Angular import cost

user_6686114 0
Viewed 381

I'm working on an angular project. I'm trying to reduce the bundle size, so I'm using VS Code Import Cost extension to check the weight that implies each 3rd party library (such as Lodash or RxJS) import.

Following best practices I'm changing imports from: enter image description here

To:

enter image description here

As shown in the screenshots, specific imports seems to weight more than generic ones.

How is this possible? Is this because I didn't complete the change in all the files?

Versions:

  • Angular 9
  • Lodash 4
  • RxJS 6
es6-modules angular visual-studio-code webpack
1 Answers

I don't know if this extension works well, but do not use specific imports. RxJS was rewritten to work well with es6 module and tree-shaking.

You can use webpack-bundle-analyzer and source-map-explorer to see the details of your bundle.

As for lodash, use lodash-es which works better with tree-shaking

user_110255820
Related