Is the entirety of PrimeNG imported when you use it, or is it tree shaken? How can I determine it by myself?

问题

I am looking at optimizing a work Angular project and we're currently looking at how we are using PrimeNG. The Tree Shaking section on Webpack's documentation (https://webpack.js.org/guides/tree-shaking/) says that it relies on the ES2015 module format to determine what code can be pruned away, since CommonJS cannot be statically analyzed.

So, I assume that the Angular compiler has the same limitation since it uses Webpack on the build process.

That being said, I was looking at PrimeNG's Setup documentation (https://www.primefaces.org/primeng/#/setup) and it claims it is distributed in CommonJS format.

Does this mean that we are forced to import the entirety of PrimeNG when we import a single module? Is there something we can do to only import what we need?

Lastly, is there a way to determine on my own project if we are importing the entirety of PrimeNG, or just what we need?

Thank you!

回答1:

If you import from the deprecated 'primeng/primeng' then yes, whole UI suite is imported. Instead import from 'primeng/inputtext' or 'primeng/tabview' so that only what you need will end up in your bundle. More info at the following blog; https://www.primefaces.org/primeng-5-2-0-final-released/

回答2:

Yes, you can determine if your bundle contains the whole primeng library by using a bundle analyzer tool. I always use webpack-bundle-analyzer.

来源：https://stackoverflow.com/questions/52806817/is-the-entirety-of-primeng-imported-when-you-use-it-or-is-it-tree-shaken-how-c