问题标签 [tree-shaking]

我尝试在 AOT 编译后对 Angular 2 应用程序使用 Tree-shaking，然后我收到下一条消息：

'Containers/module.ngfactory' 由 Containers\module.aot.js 导入，但无法解析 - 将其视为外部依赖项

在 options.globals 中没有为外部模块 'Containers/module.ngfactory' 提供名称 - 猜测是 'Containers_module_ngfactory'

而且我不知道如何解决这个问题。

这是AOT 编译后的module.aot.js代码：

汇总-config.js

和tsconfig-aot.json

一般来说，AOT 工作正常，但我无法运行摇树以将我的代码捆绑到一个文件中。

请帮我解决这个问题。

UPD

这只是主module.aot.js文件的问题。

任何建议如何解决这个问题？

我正在使用 webpack 2.x 捆绑我的项目，并且大多数摇树部分工作正常，除了我在导出的 svg 文件中拥有所有 svg 图像，即使我没有使用它们。

SVG 图标 icons.js

然后在 svg 图标 index.js

Webpack svg-sprite-loader 插件配置：

结果是 bundle.js 和 sprite.svg。sprite.svg 包含 icon1 和 icon2 但我希望只有 icon1。我怎样才能使这个 svg 摇动工作？

使用最近发布的 Angular 4 进行开发，我一直遵循Angular 的使用 AOT 编译器的食谱，将它们的配置设置应用到我自己的 tsconfig-aot.json 和 rollup-config.js 文件，以及设置我的main-aot.ts 文件。当我完成本教程并为我的 build.js 文件运行 soucre-map-explorer 时，结果没有我预期的那么详细：

将其与教程的源图进行比较：

在我的应用程序的源映射中，我希望在@angular/core 下看到更多细节（如教程的源映射中所示），但我看到的只是 core.es5.js。也许教程中的图像是针对以前版本的 Angular 的，而我所看到的是可以预期的？有谁知道这是为什么？同样，我正在使用 Angular 4。

此外，您可以在我的源地图顶部看到它显示为 91kB，但我的 build.js 文件的文件大小为 252KB。那么，这个 91kB 指的是什么，为什么它会比 build.js 的文件大小小这么多呢？

谢谢！

在我的 Angular2 应用程序（ES6 规范）中，我使用 WebPack 和一个在 dev 和 prod 配置中扩展的通用配置。在我的产品配置中，我还想在摇树之后使用丑化。

我该如何实现？任何配置它的示例/链接都会有很大帮助。

UglifyJsPlugin可以使用 ES6 脚本吗？需要ES6-Shim吗？

摇树是否需要使用 Rollup？我应该完全转向 RollUp 吗？

对不起，一个加载的问题。提前谢谢了！

有没有办法“摇树” babel-polyfill，这样只有我使用的功能才被填充？

也就是说，如果我从不String.padStart在我的代码中使用，它的 polyfill 就不应该包含在内。

我有一个MyCommonModule包含通用组件、服务等的模块 ()，我计划在不同的 Angular 应用程序之间共享。

这是一个简单应用程序的示例，它只导入MyCommonModule（但还没有引用它AppComponent）：

MyCommonModule定义如下：

当我运行时，ng build --environment=prod --target=production我得到一个 AOT:d 的构建。如果我使用分析输出，source-map-explorer我可以看到结果main.*.bundle.js并vendor.*.bundle.js包含 中的所有服务和组件（及其引用）MyCommonModule，即使我没有在我的应用程序中使用它。

这是预期的行为吗？是否为 Angular cli 应用程序启用了摇树？

我只想将文件捆绑到我的生产版本中，除非它不是用于DEBUG;

所以我使用webpack.DefinePlugin并设置了变量DEBUG === true。

还配置webpack.UglifyJsPlugin默认选项

在 js 文件中，我这样做：

我检查了最终的捆绑文件，将 A 替换为 null （所以DefinePlugin工作正常），但some-debug.js文件的内容仍在捆绑 js 中。

是否可以让 webpack 不需要该文件？

ps：我想我可以resolve.alias用来解决'./some-debug.js' --> undefined。但我想保持我的 webpack.config.js 通用，不想应用太多resolve.alias条目。

谢谢

我正在尝试通过 Rollup 插件在我的应用程序中使用 Tree Shaking。

当我运行时，node_modules/.bin/rollup -c rollup-config.js我收到此错误：

[!] Error: 'Subject' is not exported by node_modules/rxjs/Subject.js

这是我的rollup-config.js文件：

我曾经对ng2-cache-serviceandng2-dragula模块有类似的错误，但我通过将它们导入 commonjs 来解决它们

我不能这样做rxjs/Subject

我正在使用 Rollup 插件对我的 Angular 应用程序进行 Tree Shaking。我得到了一个决赛build.js，当我检查它时，它就在CSS那里，但由于某种原因它没有被 DOM 呈现。

我正在使用SCSS，我所有的样式都有.scss扩展名

rollup-config.js

index.html

我已经开始学习 Angular 2 并且遇到了“tree shaking”这个术语，但我无法从初学者的角度找到任何好的解释。

我在这里有两个问题：

1. 什么是摇树，我为什么需要它？
2. 我该如何使用它？