webpack-bundle-compare
webpack-bundle-compare copied to clipboard
Requesting ideas to Improve the tree-shaking analysis
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!!
Also, with webpack5, commonjs tree-shaking is supported https://webpack.js.org/blog/2020-10-10-webpack-5-release/#commonjs-tree-shaking
@sverrejoh @connor4312 @alina-zaieva Would you guys be able to help with the above issue? Can you please share your thoughts and comments?