问题标签 [tree-shaking]

stats.jsonWebpack 创建的文件是这样放置的，一个或多个modules组成一个 . chunk，一个或多个块组成一个asset.

我试图通过对构成资产的模块的大小（组成块）求和来计算资产的大小。在下面的代码片段中，您可以假设这jsonContents是整个 webpack stats.json 文件，chunkToModulesDict是一个字典，说明了组成块的模块是什么，并且moduleSizeDict是模块名称及其相应大小的字典。

我观察到统计文件中报告的资产大小与上述计算的资产大小不符。但是，在根据 stats.json 文件中报告的资产大小绘制计算出的资产大小时，我发现这些图表具有相似的形状。

我验证了我的假设，即计算值和报告值高度相关。

我的问题是如何更精确地计算模块中资产的大小，以使计算出的大小与统计文件中报告的大小相匹配。我正在尝试比较两个统计文件，并了解哪些资产的大小发生了变化，以及哪些模块对这些变化贡献了多少。（webpack-bundle-analyzer是一个很棒的工具，但是，我希望创建一份简短的更改报告，而不必花时间分析 UI）

我正在尝试使用 web pack 增强我的摇树技能：

在阅读了有关 webpack treeshaking 的文档，特别是副作用标志（可以在 package.json 中使用来判断 lib 是否有副作用）之后，我最终得到了以下问题：

为什么这种副作用概念仅在包级别“可配置”，而不是在（es6）模块级别？

我的意思是：webpack 是否足够聪明，可以自动知道 es6 模块是否有副作用？在什么情况下不应该摇树？

谢谢 ！

我主要是后端开发人员，但我正在尝试使我的 javascript 功能现代化。

我在 Es6 中编写了一个测试文件，如下所示：

所以，我想设置它，以便我可以根据需要将 TestA 和 TestB 导入脚本，如下所示：

因此，在我看来，第二个脚本应该导入 TestA 并在我通过诸如 gulp 中这样的转录器运行它时忽略 TestB：

但是，当我查看此转录产生的内容时，我发现 TestA 和 TestB 都已写入我新转录的文件中：

在我看来，es6 的好处之一是 tree-shaking（只获取我需要的部分）

我在这里遗漏了什么，还是这是预期的行为？

我和我的同事发生了争执，我们似乎无法从任何官方来源（MDN、webpack 文档……）找到答案。我的研究也没有什么收获。即使在进口方面似乎也存在疑问。

我们的设置是 Webpack、Babel 和一个典型的 React / Redux 应用程序。举个例子：

这允许我将 Redux 模块分成逻辑部分，使代码更易于阅读和维护。

但是，我的一些同事认为export * from，实际上可能会损害webpack的 tree-shaking 能力，因为它会欺骗它相信一个出口实际上只是被重新出口。

所以我的问题是，是否有任何事实证明或反驳这一点？

我一直在尝试学习如何编写对摇树友好的代码，但遇到了一个不可避免的副作用问题，我不确定如何处理。

在我的一个模块中，我访问全局Audio构造函数并使用它来确定浏览器可以播放哪些音频文件（类似于Modernizr 的做法）。每当我尝试摇树摇动我的代码时，Audio元素和对它的所有引用都不会被消除，即使我没有在我的文件中导入模块。

我知道包含副作用的代码无法消除，但我找不到的是如何处理不可避免的副作用。我不能只是不访问全局对象来创建audio检测功能支持所需的元素。那么，如何以一种对摇树友好的方式访问全局浏览器函数/对象（我在这个库中做了很多工作）并且仍然允许我消除代码？

在 Konvajs 2.5 中，我曾经能够通过根据Readme中的说明定位特定的 src 文件来进行最少的导入。例子：

在 v3.0.0 中，整个库都被重写为 TypeScript。我的应用程序不在 TypeScript 中，而且可能不会在很长一段时间内使用。如何在 3.0 中利用 treeshaking？我卡在旧版本中了吗？我想要 3.0 的性能改进，因为我使用了大量的模式填充。

lodash-es使用 ES6 导入语法时，我无法进行 tree-shaking 。例如，以下似乎包括所有 lodash：

我正在使用以下 lodash 配置：

如果有人想尝试一下，我会设置一个测试仓库：https ://github.com/jclangst/rollup-typescript-babel 。

我已经尝试了所有方法，包括其他 ES6 兼容库lodash-es，但没有任何效果。我做错了什么阻止摇晃树？

I have a project in which I bundle a components library using Rollup (generating a bundle.esm.js file). These components are then used in another project, that generates web pages which use these components - each page is using different components. The problem is, that the entire components library is always bundled with the different page bundles, regardless of which components I'm using, unnecessarily increasing the bundle size.

This is my Rollup setup:

I have "modules" set to false in webpack, as well.

目前我正在尝试根据环境变量删除未使用的代码。在下面的代码中，当我运行ng build --prod并设置evironment.showDevTools = false时，environment.prod.ts我希望它console.log不会包含在最终的构建文件中，但不幸的是它是。我究竟做错了什么？

main.js 的一部分

我正在创建一个新的 dotnet core ASP Web API（dotnet core 2.2），我注意到的一件事是它引用了一个名为Microsoft.AspNetCore.App.

当我查看这个包的内部时，它实际上是对微软默认的一堆其他包的引用，以便您构建所有唱歌和所有跳舞的 Web 应用程序。

我在其中注意到的一件事是对包的引用（例如），例如身份验证或实体框架。我不需要这些（我有一个非常简单的 API）。

我的问题

引用未使用的包会影响应用程序的整体编译输出吗？它是否节省内存消耗（如果不再链接 dll，则不会实例化对象）。

我想对未使用的包的引用仍然在您的应用程序上有一个“足迹”（整体编译大小输出），其中包含指向正在设置的包的链接和正在实例化的包中的对象（我可能对此完全错误- 所以任何澄清都会很棒！）。

我在 UI 世界中使用了类似于 WebPack 的摇树概念。我看过这篇文章，看起来 dotnet 有类似的东西：

https://ianqvist.blogspot.com/2018/01/reducing-size-of-self-contained-net.html

提前感谢您的任何建议！