我正在一个呈现静态 html 文件的站点上工作，我希望确定站点中的哪些页面包含特定的 css 继承规则，例如.parent .child（从父级继承的子类）。

我可以想象一个网络爬虫访问这些页面中的每一个，运行测试以查看给定页面是否具有该样式，并返回一个报告，但是是否有任何工具已经对静态文件站点很好地执行此工作（例如，不是css-tree-shake-plugin对于 webpack）？对于其他人可以就这个问题提供的任何见解，我将不胜感激。

我尝试让 webpack tree-shaking删除未使用的babel-polyfill.

index.js文件包含：

在这个文件中，没有代码需要任何 es2015+ polyfill，所以我希望通过 tree-shaking 移除捆绑输出中未使用的 babel-polyfill。事实并非如此，并且捆绑包仍然包含它们（缩小）。

这是带有此代码的 git 存储库。

webpack 配置：

和.babelrc：

我试图用 替换babel-minify-webpack-plugin，uglifyjs-webpack-plugin但它给出了相同的结果。

如何使 tree-shaking 工作，并且输出不包含babel-polyfills原始代码中未使用的任何内容？

考虑到这个Webpack 3.8.1配置。

和这个Babel 6.26.0配置

我期望树抖动和死代码消除UglifyJS应该以某种方式工作，使我能够从index.es.js模块中编写命名导入，例如Material-UI-Icons，未使用的导入从包中删除。

这个库确实将 package.json 中定义的 ES6 模块重新导出为"module": "index.es.js".

然而，在导入单个图标后，我的包大小增加了 0.5MB。当我将其更改为

仅导入此图标，捆绑包大小再次减小。

我的配置是否有问题，或者我是否误解了摇树的工作原理并且不适用于这种情况？

我正在尝试找到一种方法来对我的模块进行 tree-shaking 并将 Babel 与 Webpack 一起使用。

如果我从 webpack 文档 ( https://webpack.js.org/guides/tree-shaking/ ) 中获取示例代码并运行它，未使用的模块/函数/其他导出被标记为未使用的和谐导出，这是预期的结果。在使用 -p 参数（生产）运行 webpack 之后，webpack 使用 UglifyJS 删除死的和未使用的代码（用于 tree-shake）。

现在，如果我将 babel-loader 添加到我的 webpack 配置文件中，我的 ES2015 模块将被转译，但现在不再标记为未使用的导出。

例如：

数学.js

app.js（我的入口文件）

在没有babel-loader 的情况下通过 webpack 运行它，该cube函数将被标记为未使用并在编译生产后删除（-p）。

通过带有babel-loader 的webpack 运行它，该cube函数将不会被标记为未使用，并将保留在已编译的包中。

我错过了什么？

编辑

这是一个可以重现这种情况的演示 repo

https://github.com/Milanzor/babel-and-treeshaking-question

更新

如果我添加一个 .babelrc：

我得到了相同的结果，但是如果我添加modules: false到 preset-env 选项，Babel 不会将模块编译为 ES5，并且 Webpack 会再次将模块标记为未使用。

结论

我需要找到一种方法来告诉 Webpack 我的模块是用 Babel 转译的，或者我需要找到一种方法来告诉 Babel 自己扫描未使用的代码。

// file1.js

// input.js --> 汇总输入文件以捆绑

理想情况下，不应捆绑 myLabel，因为它不是根据 treeshaking 导入的。但 bundle 包括 myDiv 和 myLabel。

请帮助我理解。

给定entry的是入口模块：

它只是function1从external1模块中使用。

我预计会淘汰external1.function2整个模块。external2

但是，我的输出包括external2.function1. 只是……为什么？

这是整个事情的回购。

当我使用webpack和UglifyjsWebpackPlugin时，我尝试缩小代码：

我有 ：

如果我缩小

我会正常的。

那么，为什么Math.random还存在呢？摇树不行吗？

webpack：3.10.0
UglifyjsWebpackPlugin：1.1.6

谢谢！

我有一个设置，其中库的 index.js（主入口点）导出库中的所有内容......所以它的设置如下：

（看看）

当我从该入口点导入 1 个导出的库时，看起来 Webpack 无法对输出进行树状抖动。runningwebpack -p实际上是将整个库包含在包中，尽管只导入了一个导出。运行webpack（非生产包）确实unused harmony export ....在整个文件中显示（167 次），但为什么它们没有被删除？

我有一个显示此问题的测试设置：https ://github.com/purtuga/webpack-bundle-test

希望有人（比我聪明:)）可以帮助确定我做错了什么。

/保罗

我的目标是lodash在我的webpack.prod.js. 这是我的配置文件。为了完整起见，我还将包括webpack.dev.js、和：webpack.common.jstsconfig.jsonpackage.json

webpack.common.js：

webpack.dev.js：

webpack.prod.js：

tsconfig.json：

package.json：

使用此配置，app.bundle.js文件大小为 507 KB，app.bundle.js.map大小为 1.6 MB。如果我不 uglify 构建输出，我可以看到整个 lodash 库正在写入文件中。我还看到了一些其他功能，gl-matrix即被写入文件，尽管我什至没有使用它们。

我webpack-bundle-analyzer也在开发中运行，输出与生产没有区别。由于缩小，只有 budle 文件约为 1.4 MB 而不是 1.6 MB。

我lodash在整个项目中只加载了两次，比如：

import { some, find, cloneDeep } from 'lodash';

不再使用任何lodash功能。为什么Webpack我的膨胀app.bundle.js？

我的配置有问题吗？

我正在调整一个项目webpack.config.js以优化缓存，并且它的条目是其中的一些内容：

由于material-ui使用 ES6 模块，我想知道当它包含在不同的条目中时它是否仍然是树摇晃的，或者它是否按原样包含在内。

额外的问题：我如何根据 stats json 检测到这一点？