Angular 进口成本

Question

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:

To:

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

Answer 1

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