为什么 material-ui 模块在 Webpack 4 tree shaking 后同时显示在 node_modules 和 src 中？
Why do material-ui modules show in both node_modules and src after Webpack 4 tree shaking?
Cloud Native Interactive Landscape 是一个开源的、仅限浏览器的应用程序，它加载静态 React 应用程序以可视化云原生生态系统：
您可以交互式查看 webpack-bundle-analyzer 的 results，这里是快照：
我不明白为什么@material-ui/core/es同时出现在node_modules和src中。更一般地说，我试图了解我们的 tree-shaking 是否得到了最佳实施，或者是否有更好的方法来配置它。如果我们是最佳的 tree-shaking lodash，我也很高兴听到。 （请注意，我们只针对常青浏览器。）
请随时分叉 repo and edit webpack.config.prod.js。如果您打开一个拉取请求，Netlify 将构建并部署一个测试服务器，您可以在 test-server-url/report.html.[=22 下检查结果=]
所以让我先声明 es 这个名字选错了。 src 会更合适，因为它就是：未转译的源代码。这记录在 the docs under minimizing bundlesize
使用 webpack 4 和相应 package.json 中的正确 module 条目，您应该自动引入这些包的 esmodule 版本。 esmodule 版本负责 webpack 中的大部分 tree-shaking 优化。
@material-ui/core 已经有一个正确的条目。然而，这只是顶层的 esmodule 版本。然后使用不允许在 webpack 中摇树的 commonJS 编写实际组件。我们有一个 open PR 但我们可能会等待下一个专业，因为我们不对编译文件进行测试，这使得对构建的更改变得可怕。
至于为什么这显示为一个串联模块，我无法帮助您。在调查过程中，我做了同样的观察 (https://github.com/eps1lon/material-ui-treeshaking). It is probably an issue with the bundle-analyzer and has no actual impact on the generated chunks (e.g. https://github.com/webpack-contrib/webpack-bundle-analyzer/issues/188)。
总的来说，我建议不要使用 es 版本，而只是让 webpack 以 module 条目为目标。它允许对大部分包进行 tree shaking，但你会失去一些微优化。我测试了将所有内容转译为 esmodules 并对捆绑包的统计大小进行了一些改进，从 200KB 到 180KB，但遇到了一些 gzip 反优化，这将 gzip 大小增加了 1KB (meme version)。所以不要为每个小文件强调 tree-shaking。
Cloud Native Interactive Landscape 是一个开源的、仅限浏览器的应用程序，它加载静态 React 应用程序以可视化云原生生态系统：
您可以交互式查看 webpack-bundle-analyzer 的 results，这里是快照：
我不明白为什么@material-ui/core/es同时出现在node_modules和src中。更一般地说，我试图了解我们的 tree-shaking 是否得到了最佳实施，或者是否有更好的方法来配置它。如果我们是最佳的 tree-shaking lodash，我也很高兴听到。 （请注意，我们只针对常青浏览器。）
请随时分叉 repo and edit webpack.config.prod.js。如果您打开一个拉取请求，Netlify 将构建并部署一个测试服务器，您可以在 test-server-url/report.html.[=22 下检查结果=]
所以让我先声明 es 这个名字选错了。 src 会更合适，因为它就是：未转译的源代码。这记录在 the docs under minimizing bundlesize
使用 webpack 4 和相应 package.json 中的正确 module 条目，您应该自动引入这些包的 esmodule 版本。 esmodule 版本负责 webpack 中的大部分 tree-shaking 优化。
@material-ui/core 已经有一个正确的条目。然而，这只是顶层的 esmodule 版本。然后使用不允许在 webpack 中摇树的 commonJS 编写实际组件。我们有一个 open PR 但我们可能会等待下一个专业，因为我们不对编译文件进行测试，这使得对构建的更改变得可怕。
至于为什么这显示为一个串联模块，我无法帮助您。在调查过程中，我做了同样的观察 (https://github.com/eps1lon/material-ui-treeshaking). It is probably an issue with the bundle-analyzer and has no actual impact on the generated chunks (e.g. https://github.com/webpack-contrib/webpack-bundle-analyzer/issues/188)。
总的来说，我建议不要使用 es 版本，而只是让 webpack 以 module 条目为目标。它允许对大部分包进行 tree shaking，但你会失去一些微优化。我测试了将所有内容转译为 esmodules 并对捆绑包的统计大小进行了一些改进，从 200KB 到 180KB，但遇到了一些 gzip 反优化，这将 gzip 大小增加了 1KB (meme version)。所以不要为每个小文件强调 tree-shaking。