CODEWITHSUNDEEP
angularwebpackvisual-studio-codees6-modules
LilSap
LilSap

Reputation: 243

Angular import cost

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:

Upvotes: 2

Views: 566

Answers (1)

HTN
HTN

Reputation: 3604

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

Upvotes: 2

Related Questions