为什么在Webpack 4树摇动后，material-ui模块会同时显示在node_modules和src中？

Question

Cloud Native Interactive Landscape是一个开放源代码的，仅用于浏览器的应用程序，可加载静态React应用程序以可视化云原生生态系统：

• 尝试app
• 查看source

您可以交互式查看webpack-bundle-analyzer的results，下面是快照：

我不明白为什么@material-ui/core/es和node_modules中都出现src。更笼统地说，我试图了解是否以最佳方式实现了摇树，或者是否有更好的配置方法。如果我们最喜欢摇摇晃晃的lodash，我也将不胜感激。 （请注意，我们只针对常绿的浏览器。）

请随时派生repo并编辑webpack.config.prod.js。如果您打开请求请求，Netlify将构建并部署测试服务器，您可以在 test-server-url /report.html下检查结果。

Answer 1

因此，让我作为序言es名称的选择不正确。 src会更合适，因为它就是：未编译的源代码。 the docs under minimizing bundlesize

中对此进行了说明

使用webpack 4和相应module中相应的package.json条目，您应该自动提取这些软件包的esmodule版本。 esmodule版本负责webpack中的大多数树状优化。

@material-ui/core已经有一个正确的条目。但是，这仅是顶级的esmodule版本。然后，使用commonJS编写实际的组件，该组件不允许在webpack中摇晃树。我们有一个open PR，但是我们可能要等下一个专业，因为我们不对编译后的文件进行测试，这会使构建令人恐惧。

关于为什么它显示为串联模块，我无能为力。在调查期间，我进行了同样的观察（https://github.com/eps1lon/material-ui-treeshaking）。捆绑分析器可能是一个问题，并且对生成的块（例如https://github.com/webpack-contrib/webpack-bundle-analyzer/issues/188）没有实际影响。

总体而言，我建议不要使用es版本，而只需让webpack定位module条目即可。它可以使大部分包装物摇晃，但您需要进行一些微优化。我测试了将所有内容转换为esmodule的过程，并将捆绑包的统计数据大小从200KB进行了一些改进，但对gzip进行了一些优化，使gzip压缩后的大小增加了1KB（meme version）。因此，不要为每个小文件而担心摇树。