webpack-bundle-compare icon indicating copy to clipboard operation
webpack-bundle-compare copied to clipboard

Requesting ideas to Improve the tree-shaking analysis

Open karthikpala opened this issue 3 years ago • 2 comments

Hello, Thanks for the awesome compare tool 👏

I've noticed that the below code block is being used to understand if require (cjs) is being used instead of a esmodule and hence marking it as a non-treeshakable module

https://github.com/microsoft/webpack-bundle-compare/blob/b719bbe3adfa07bcae2fac4a509853a3c56a9852/src/client/stat-reducers.ts#L188-L201 https://github.com/microsoft/webpack-bundle-compare/blob/b719bbe3adfa07bcae2fac4a509853a3c56a9852/src/client/stat-reducers.ts#L394

Many node modules are still exporting cjs files but still take care of tree-shaking. For e.g. using require('lodash/get') will make sure that only the files required for get function are bundled in the final bundle created by webpack But this tool marks lodash as Not Tree-Shaken

This is hence leading to a manual analysis to cross-verify of all such modules reported by the tool. Other such complaints for Not Tree-Shaken were for modules such as axios, css-loader, style-loader, @babel/runtime etc.,

Can someone please share the idea/motivation behind showing the Not Tree-Shaken alert for a better understanding and ideas on the improvement we can do so that users can see correct percentage of tree-shaken modules in the final dashboard

Thanks again for all the great work!!

karthikpala avatar Feb 09 '22 18:02 karthikpala

Also, with webpack5, commonjs tree-shaking is supported https://webpack.js.org/blog/2020-10-10-webpack-5-release/#commonjs-tree-shaking

karthikpala avatar Feb 09 '22 18:02 karthikpala

@sverrejoh @connor4312 @alina-zaieva Would you guys be able to help with the above issue? Can you please share your thoughts and comments?

karthikpala avatar Feb 15 '22 04:02 karthikpala