问题标签 [tree-shaking]

根据 webpack 文档，我尝试将 UglifyJSPlugin 添加到 webpack 4 项目中，但我仍然在我的包中看到死代码甚至注释，这让我认为我的 uglify 插件配置没有被使用。

链接到项目

文档声明“为了利用 tree shaking，您必须...
- 使用 ES2015 模块语法（即导入和导出）。完成
- 在项目的 package.json 文件中添加“sideEffects”条目。完成。
-包括一个支持删除死代码的压缩程序（例如 UglifyJSPlugin）。” 完毕

尽管如此，我的捆绑包中仍包含未使用/未导入的 leftpad 功能和注释。

所有的配置都可以在这里看到。根据我看到的结果，我怀疑这与我的 webpack 配置中的 uglify设置有关。

要重现，请提取repo并运行yarn build

在Webpack 4 的文档中，他们提供了一个示例，其中square包中的函数标有注释，即unused harmony export square. 我跟着这个例子; 但是，bundle.js 不包含此注释。

重现：

1. 从这里提取代码
2. 执行一个yarn install
3. 执行yarn run build

请在此处找到我的源代码：https ://gitlab.com/trevor.screws/webpack-tutorial/tree/stackoverflow_question

编辑：

在开发模式下使用 Webpack 4.1.1，这是我的 bundle.js 文件中的输出：

我想将一个组件导入 Angular 4.4.6 中的另一个组件。这可能最终只是一个理论上的答案，这很好。只是想我会伸出手来看看是否有人这样做。我通常只会为组件等创建一个模块，但我真的想删除任何额外的文件 - 试图避免文件异味。

我没有真正的代码可以分享，尽管我正在描绘这样的事情：

我这样做已经在整个应用程序的几个地方引入了外部组件，例如与 @ViewChild() 的父/子通信，所以我明白了。只是想知道如果不使我需要在 HTML 中访问的组件全局可用，或者我是否必须创建一个模块并像往常一样导入它，这是否可能。谢谢！！

我正在修改 webpack 文档中的摇树示例。但是，一旦我将 babel-loader 添加到组合中，似乎摇树就不起作用了。这是我的项目的概述：

index.js：

数学.js：

.babelrc：

包.json：

webpack.config.js：

由于 index.js 不使用 square 函数，因此应该将 square 函数从包中删除。但是，当我打开 bundle.js 并搜索“square”时，我仍然可以找到 square 函数和控制台日志语句。在我注释掉 webpack config 中的 babel-loader 规范并再次 npm run build 之后，在生成的包文件中看不到“square”字样。

我确实在 .babelrc中指定了模块：false 。
谁能告诉我是什么导致了这个问题？
这是用于复制的存储库： https ://github.com/blogrocks/treeshaking-issue.git

我已经在我的模块上启用了 tree-shaking，但是 source-map 仍然包含 tree-shaking 代码，即使源没有。有没有办法让 webpack 也从源图中删除摇树代码？

我们正在构建一个 Angular 应用程序，它应该具有发现和动态加载自定义库的能力，即在构建时未知/不可用的库。

为了支持这一点，我们不能对主应用程序进行 tree-shake，因为这些自定义库可以使用来自第三方库（例如 angular、rxjs）的符号，而主应用程序没有。

用 angular-cli v6 解决它的方法是什么？有没有办法在生产构建中禁用摇树？

Angular 6 引入了可摇树的提供程序

句法。

为了利用 tree-shaking 方面的优势，我是直接通过构造函数还是通过 Injector 注入服务有区别吗？

例子：

服务：

消费者1：

消费者2：

在这两种情况下，MyService 都会被注入。我希望只有在第一种情况下，AOT 编译器才能确定该服务是通过静态分析使用的。

如果我使用第二个版本会有什么影响？AOT 会检测到 Injector 的注入，然后基本上跳过提供程序的摇树吗？或者它是否足够聪明地检测到 MyService 是从注入器中获取的？

有一个模块用作命名空间（出于可测试性原因或其他原因）：

这可能被认为是一种不好的做法，因为baz取决于上下文并且不能作为命名导出单独导入：

假设它this.bar不会影响 tree-shaking 机制bar并且qux会被 tree-shaking 是否安全？

bar是否有可能让捆绑器知道and之间的关系baz，所以如果Foo.baz正在使用，只有qux摇树？

这个问题主要解决了 Webpack 摇树问题，但也欢迎对其他捆绑程序（Rollup）进行解释。

假设我有：

我可以用HelloWorld.sayHello(). 但是在我的客户中，死代码sayGoodbye并没有被汇总消除，我尝试ng build --prod使用 Angular 6。

然后在客户端代码中直接调用sayHello(). 在我看来，这有点不可读，因为我没有立即获得这个函数来自哪里的上下文。

所以我的问题是，有没有一种方法可以同时拥有命名空间和 treeshaking？

我愿意在我的 Angular 应用程序中使用 monaco-editor（vscode 编辑器）。我在他们的文档中注意到，使用 tree-shaking 有效加载这个项目的推荐方法是使用社区 webpack 插件：monaco-editor-webpack-plugin。

不幸的是，如果不弹出我不想做的 angular webpack 配置，这是不可能的。

我还注意到 AMD 版本是 2MB，这对于网络应用程序来说是巨大的。

有没有一种方法可以使用 angular cli 仅编译和捆绑 monaco-editor 中真正使用的源代码（摇树）？

我正在使用角度 6。

谢谢。