问题标签 [tree-shaking]

我刚刚将我的 react 项目中的 webpack 从版本 1 升级到了最新版本（3.5.5）。

我按照迁移指南进行操作，没有任何问题，但显然我的捆绑包中没有应用摇树（所有 aws-sdk 都包含在捆绑包中，即使我只导入了 s3 模块）。

这是我的 webpack 配置：

webpack.config.base.js

webpack.config.prod.js

我尝试了许多不同的配置，但似乎没有任何效果，有人知道我做错了什么吗？

I stumbled across a very strange name issue. I'm trying to use a TypeScript library (TypeORM) in an Ionic App which uses webpack to build and compile the app.

TypeORM has decorators for Entities called Entity, AbstractEntity and others. When I import and use the Entity decorator is does not get marked as used by webpack. When I switch to the AbstractEntity it is marked as used. Every other decorator gets marked as used.

This Typescript class

Is translated into

but Entity is marked as unused

but when I change Entity to AbstractEntity gets marked as used

Any ideas as to why?

我对使用 Webpack 的 angular-cli 创建的 Angular 4 应用程序有一些疑问。

ng build --prod --aot创建最终捆绑包以部署到生产环境中的最佳命令是什么？

如果是，是否通过 angular-cli 默认配置了 Tree Shaking 和 AOT 和 Uglfy，还是我应该手动配置这些？

在捆绑使用 angular-cli 开发的 Angular 4 应用程序时，还有其他最佳实践或建议吗？

我使用@angular/cli 1.3.1 版。

我正在处理 node@6.11.0、webpack@3.4.1

文件.js

main.js

bundle.js 包含了 math.js 的所有方法，所以我想知道 tree-shaking 是否有效。并且/* unused harmony export bar */ 当我使用 tree-shaking 时功能栏已经签名，bundlejs 应该只包含 foo 和 lod 方法，不是吗？ git clone https://github.com/z2014/All-test-demo, 并测试

我正在使用 Angular CLI 来使用--prodswitch 构建一个用于生产的应用程序。捆绑包是在​​dist目录中创建的。有没有办法知道在 tree-shacking 和所有其他步骤之后实际将哪些类和函数放入包中？

我正在尝试让 rollup、commonjs、es6 和 tree shaking 正常工作。

目前，我有以下构建脚本：

加载以下main.js文件

和export.js文件

输出以下内容：

我不确定这是否是正确的行为，我假设我可以对 es6export.js文件使用 tree-shaking，因此不需要在我们的捆绑代码中导入secondFunction()from 。export.js

我已经尝试了许多设置组合，但似乎没有任何东西能够让摇树工作。

值得注意的是，我在服务器上使用 commonjs 并尝试使用捆绑在客户端上的相同文件——这就是我混合使用 cjs 和 es6 的原因。

我有一个依赖于一些更大的库和 ember 插件的应用程序。从这些依赖项中，我使用了一个非常小的函数和组件子集，所以我很惊讶最终输出中包含所有内容。我想剥离所有未使用的东西。

浏览互联网，我无法找到有关此主题的任何有用资源。2017 年 Ember 应用程序的死代码消除或摇树的推荐设置是什么？

PS：我知道 Tree Shaking 和死码消除有点不同，但目的基本相同。

我试图弄清楚Webpack中的tree-shaking，我注意到在这个Example1上运行是 11kB，而在Example2上是 7kB。-webpack -optimize-minimize

该库Rambda在其package.json. 据我所见， Webpack不尊重它，我需要明确引用esm文件位置。

问题是错误还是功能？

示例 1

示例 2

我最近在一个模块中看到了一个关于深度需求的建议——

注意：如果您不想要基于 ReactART 的组件及其依赖项，请改为执行深层要求：从 'react-native-progress/Bar' 导入 ProgressBar；。

根据我的知识——没有添加/配置 Webpack 2 与 tree-shaking 并自己启用 uglify——RN 捆绑器不会进行 tree-shaking 和删除未使用的模块。

鉴于此，建议的深度需求真的会导致未使用的依赖项不包含在最终捆绑包中吗？

我在我的 webpack 3 配置中遇到了一些树抖动的问题（也许），因为我使用了很多重新导出。我想保留再出口，但避免不必要地增加我的捆绑包大小。（另外，我还想避免在我的开发版本中使用不必要的代码）所以我想知道是否有一种方法可以通过文件“跟踪”导入并将它们替换为模块的直接路径。

代码 1：

index.js：

文件夹 1/index.js：

文件夹1/文件夹2/index.js：

所以（没有摇树，有时还有 webpack 以某种方式破坏的摇树）x 并且 y将包含在我的包中，如果我有以下 import 语句就不会发生这种情况：

代码 2

index.js：

嗯......是否可以在使用 webpack（或任何其他工具）的构建过程中从代码 1 到代码 2？