问题标签 [tree-shaking]

我已按照教程从此处将 webpack 添加到 Angular 。如果我理解正确，我们将主模块提供给 webpack，然后它遍历整个树并将所有引用的文件添加到包中。我还读到我们可以通过使用 tree-shaking 来优化它。

我在这里不明白的是，如果 webpack 已经只扫描“使用”的模块（即我们“导入”的模块），为什么我们需要 tree-shaking。

摇树是否会做一些额外的事情（比如检查未使用的模块中的类并从模块中删除它们，即使它是导入的？）还是我完全误解了这个概念？

我已经用 angular 设置了 webpack 2，而且大多数情况下它似乎可以工作。虽然它似乎没有tree-shaking，因为我有一个几乎什么都不做的应用程序，而且vendor.js仍然是 800+ KB。

似乎很少有关于如何打开 tree-shaking 的信息，但据我所知，它对于 ES6 模块会自动打开，但不适用于 ES5。是这样吗？

最重要的是：如何使用 webpack2 将 tree-shaking 应用于 typescript/angular2？

Webpack 将在包中包含所有d3.js，import { select } from 'd3'如下面的包可视化所示。这个问题可以通过做来解决，import { select } from 'd3-selection'但这在某种程度上违背了自动摇树的目的。

在我们的非库代码的简单情况下，摇树似乎确实有效。

我们使用"modules": falsein our.babelrc是为了保留模块语法，并'module'在 webpack.config.jsresolve: { mainFields: ['module', 'browser', 'main'] }中使用 resolve 来选择 d3 的基于模块的代码。如您所见，导入的node_modules/d3/index.js被划分为 ES6 模块，而不是单一的浏览器包或 CommonJS 导出。

这应该作为问题发布在 webpack github 页面上还是我做错了什么？这是使用所有最新版本的库（d3@4.5.0,webpack@2.2.1等）

编辑：似乎这与以下问题有关：

• https://github.com/webpack/webpack/issues/2867
• https://github.com/webpack/webpack/issues/2899

我刚刚将我的 react 应用程序从 webpack 1 更新到 webpack 2。但是，我的包大小增加了 ~30Kb。我希望捆绑包的大小会减小，我如何确认摇树有效。为什么增加？

我认为Angular-cli tree-shaking exclude component from removal的问题非常相似，但我似乎无法从中得到任何东西。

本质上，我有一个动态组件工厂，如如何使用/创建动态模板以使用 Angular 2.0 编译动态组件？.

当我使用具有非生产设置的最新 Angular CLI 构建它时，一切正常。但是，一旦我使用生产设置，当尝试加载具有动态创建内容的页面时，我会立即在浏览器中收到以下错误跟踪：

例外：没有找到 'e' 的 NgModule 元数据。
原始堆栈跟踪：
main.dc05ae9….bundle.js:formatted:4731
错误：找不到“e”的 NgModule 元数据。
在 f (vendor.c18e6df….bundle.js:formatted:76051)
在 t.resolve (vendor.c18e6df….bundle.js:formatted:20624)
在 t.getNgModuleMetadata (vendor.c18e6df….bundle.js:formatted: 20169)
在 t._loadModules (vendor.c18e6df….bundle.js:formatted:40474)
在 t._compileModuleAndAllComponents (vendor.c18e6df….bundle.js:formatted:40462)
在 t.compileModuleAndAllComponentsSync (vendor.c18e6df….bundle。 js:formatted:40436)
在 e.createComponentFactory (main.dc05ae9….bundle.js:formatted:4789)

这是我的组件工厂类：

正在被转换为

如您所见，错误消息中的“e”是一个空函数e()，createComponentModule即使它应该包含@NgModule内容。

如何动态创建新的 NgModule 并仍然使用 Angular CLI 的生产模式？

版本：
Angular2：2.4.8
Angular CLI：1.0.0-beta.32.3
TypeScript：2.1.6

我不知道我在问什么仍然被称为摇树，但假设我有两个模块：

在我的应用程序中，我只使用过Component_One. 我导入 CoreModule 的全部原因是我可以使用Component_One.

CoreModule 中公开的所有三个组件都是完全独立的。

如果我在构建应用程序时启用了三个摇动，Component_Two并且Component_Three仍将包含在最终捆绑包中，对吗？因为它们是由 导入的CoreModule，即使它们与我的最终应用程序完全无关，也没有在任何地方使用。

那么目前有没有办法将它们从最终的捆绑包中摇出？

我一直在阅读有关如何使 tree shaking 工作以及如何解决 webpack 和 typescript 和 uglify 存在的问题的信息，但我似乎无法使其工作。

在一个全新的 Angular4 项目中让 tree shaking 工作的最简单的步骤是什么？（使用 生成的项目ng create foobar-project）。

我刚刚使用 CLI 创建了一个新的 Angular 4 项目：ng new test

版本：

但是，摇树无法正常工作，因为我未使用FooBar的类仍在main.*.js文件中。

我的示例组件 TS 文件（FooBar 不应在输出中）：

我尝试使用汇总（如文档中所述），但这也不起作用......

有没有一种简单的方法来启用 tree-shaking？（我希望在通过 CLI 创建项目时默认启用它）。

更新：我正在使用ng build --prod它仍然没有动摇..

我在一个非常古老的项目中使用 angular 1.5 和 express。现在我需要对其进行改造（而不是重建）。

我正在添加一些 webpack 优化并将其传输到客户端渲染 Angular 应用程序并将服务器代码与客户端代码分离。

我的最终目标是 - 使用 webpack 2 和 angular 1.5，使用具有最新代码标准的 ES6,6 功能来制作完整的工作流程。

我想使用 webpack 2 的特性，比如代码拆分和 tree shaking，这样我就可以按需加载所有模块。

为此，我创建了一个 webpack 配置。如果我{modules: false}从中删除它可以正常工作，.babelrc但是添加它对于摇树是必不可少的。

我的问题是，这几乎是我实现摇树所需要做的一切。但即使在这一切之后，我的 app.hash.js 构建后的文件也包含所有angular代码lodash。相反，它应该是仅适用module于Angular且仅适用于 lodash 的代码map

这是我的应用索引

这是我的 webpack conf

这是按.babelrc文件

我有一个实用程序库：goodcore 我在另一个项目中使用。它工作得很好，但是当我使用Rollup捆绑和 treeshake 它时，它总是包含整个 goodcore 库，即使我只使用它的一小部分没有链接到某些包含的文件。

这两个项目都是 Typescript 并使用 ES2015 模块加载。

我使用以下方法引用了 goodcore 库：

goodcore 中的 index.js 看起来像：

尽管如此，我最终还是得到了来自 goodcore 的所有东西，比如 Tree，包含在另一个项目的汇总构建中，而我的印象是 treeshaking 应该删除未使用/引用的东西。

另一个项目的汇总配置如下所示：

我究竟做错了什么？