问题标签 [tree-shaking]

关于测试模块化代码的一件不幸的事情是，有时您必须导出一些东西来测试它们。这会污染您的代码，并且还会使编译器或 linter 上的“未使用变量”标志等不错的功能变得不那么有价值 - 如果您在应用程序中删除了一个用法，您的测试中可能仍然有一个用法。

一种可能的解决方案是类似于“弱引用”，其中测试代码将引用它正在测试的东西，但使用明确的“linter，编译器：请不要将此引用视为使用”标志。

我检查了tsc标志和tslint配置文件，但没有看到任何东西。A）我错过了什么吗？B) 这是一个好主意吗？实施起来有多难？

（其他解决方案就没有那么好。例如，您不能导出内容然后使用rewire对模块进行自省以获取私有内容。我的理解是 tsc 将无法遵循这样的参考。）

谢谢你的帮助。

我正在尝试更好地学习 webpack 4，并尝试在私有库上进行 tree-shaking。我有一个非常小的配置

我有一个看起来像这样的 src 文件。

我将我的库简化为仅导出两个组件（BareInput、BareEmailInput），如您所见，我只在此测试 webpack 应用程序中导入其中一个。似乎摇树应该在这里工作，但我仍然在我的包中看到 BareEmailInput。

我的图书馆捆绑：

而且，我生成的 webpack 包：

所以我有几个问题，为什么 BareEmailInput 仍然存在于我的 webpack 包中？为什么它的处理方式似乎与 BareInput 不同？（即：为什么是 forms_es_BareEmailInput 而不仅仅是 BareEmailInput？）

我已经搜索过副作用，但我没有看到任何副作用，而且我sideEffects: false的 package.json 中确实有我的库。

使用 webpack v4.16.5

我有一组规范 v1 自定义元素，我使用 webpack 4 来捆绑（和 babel-loader 进行转译）。

所有组件看起来都与此类似：

现在，为了能够使用选择性的命名导入从这些组件创建自定义包，我需要将这些文件标记为无副作用。

但是，组件注册发生在模块本身中：

据我了解，这是一个副作用。

现在我有一个index.js基本上看起来像这样的：

我的 webpack 入口点如下所示：

现在，当我这样做时，CompBtn（以及 index.js 中的所有其他导出）最终成为捆绑包的一部分，即使它没有导入我的 webpack 入口点。

在 webpack 中允许使用这些 web 组件进行 treeshaking 的推荐方法是什么？

这两个功能是否有名称或术语？我确定他们会这样做，但不知道要搜索什么。

和

如果一个函数超出了它自己的范围，它会被称为特殊的东西吗？你怎么称呼不使用任何超出其自身范围的函数？

我想向某人解释的是，如果我在哪里编写导出两个辅助函数的实用程序文件

然后在另一个文件中我只会使用除法功能

然后 WebPack/rollup 将能够摇树并丢弃half最终包中的功能

但是如果half从实用程序文件中导入函数的位置

但是真的不需要divide我的主脚本中的函数我最终会在我的包中同时拥有这两个函数，因为half取决于divide

如果我将函数更改为不使用它自己的范围之外的任何变量，如下所示：

那么它将是“依赖”免费的。

无法找出为什么 tree-shaking 没有像我预期的那样工作......我的目标是建立一个tree-shak-able图书馆。

• index.js
  • 标题
  • 按钮 => 按钮组

我有一个使用这个库的 webpack 应用程序。当我只导入 Header 组件时，Button 模块按预期删除，但我的webpack包包含该ButtonGroup组件。

有人可以解释为什么吗？如果可能的话，如何从构建中摇树嵌套组件webpack？

谢谢

汇总和库配置

rollup.config.js

index.js

Header.jsx - 简单的反应组件

Button.jsx - 反应组件

还有我的 webpack 配置和构建：

webpack.config

* 应用程序.jsx *

* 构建状态 *

* 构建输出 *

我有一个 components_settings 文件，该文件描述了应包含在生产包中的组件列表，该文件应在构建过程中由 webpack 读取，例如

我将这两个文件都作为 .jsx 组件提供，并且我不希望这些组件的代码包含在我的生产包中，如果它们在 components_settings 文件中设置为 false。

我阅读了有关摇树的信息，并设法消除了未使用的代码，但是当我尝试有条件地渲染时，例如{process.env.NODE_ENV == "development" ? <RedButton /> : null}，在生产包中仍然包含代码：/

如果摇树在这里是错误的方法，我愿意接受其他/更好的解决方案。感谢您的任何帮助

我在删除未使用的 React 组件时遇到了死代码问题。

我在这里创建了一个示例项目 - https://github.com/amithgeorge/webpack-issue-demo-1 ...

定义了三个类，

• class A是一个使用 prop-types 的反应组件，
• class B是一个使用 , 连接到 redux 的反应组件connect HOC，
• class C是一个简单的类，而不是一个反应组件 -

代码 - https://github.com/amithgeorge/webpack-issue-demo-1/blob/5643302db776263db857259cc00c2bafe46acb8c/src/classes.js ....

在入口文件中，我只导入 C 类并使用它 - https://github.com/amithgeorge/webpack-issue-demo-1/blob/5643302db776263db857259cc00c2bafe46acb8c/src/index.js

我希望输出文件只包含 C 类，但它什么都有！

https://github.com/amithgeorge/webpack-issue-demo-1/blob/5643302db776263db857259cc00c2bafe46acb8c/dist/main.js

如果我删除propTypes并删除connect，则 ClassA 和 ClassB 的代码不存在。但是输出仍然有 React、PropTypes 和 React-Redux 的完整代码。如果这些没有被使用，我如何让 webpack 删除它们。

像 React 或 Antd 这样的外部模块可以在 webpack 4 中没有 Babel 的情况下被摇动（摇树）吗？

示例 React 结构：node_modules->react 文件夹包括 /cjs 和 /umd 目录。

设置：
项目： https://github.com/webpack/webpack/tree/master/examples/harmony-unused
配置 https://webpack.js.org/guides/tree-shaking/
Typescript-Loader（可选）https： //github.com/TypeStrong/ts-loader

src 文件会被摇动，都包括像antd这样的node_modules或者react not。

问候里奇

我有一个 create-react-app 项目，我正在努力减少捆绑的 JS 文件大小。我的包大小大约有一半来自名为 MDBReact（一个反应组件库）的依赖项，其中大部分都没有被使用。我正在尝试找出如何/是否可以从捆绑构建中删除带有摇树摇晃的死代码。我已经研究了一段时间，我找到的最接近的文章是这个。这篇文章让我感到困惑，它没有解释如何或是否可以做到。我还找到了这个关于 webpack tree shaking 的指南，解释了它是如何完成的，但这似乎并不能解决问题。

我正在尝试获取一个使用 Jquery 模态插件的旧版应用程序，该插件需要引导程序的 javascript 才能在使用自定义 Webpack 配置的 Angular 6 和 Webpack 4 项目中工作。一切正常，除了捆绑期间发生的摇树正在删除我vendor.ts文件中的引导导入，因为我在我的应用程序中没有明确使用引导导入。

这会导致我的引导模式和引导下拉菜单中断。

注意：如果我添加类似：

对于我的main.ts文件，webpack 不会删除引导程序，并且一切正常。

我已经尝试向文档package.json中建议的 sideEffects 属性添加多个条目，但我认为该属性用于标记应删除的代码。有没有办法将导入的模块标记为不从摇树过程中删除？

我也尝试过这样的ProvidePlugin：

谢谢你的时间。