javascript - Webpack 2 没有正确摇树 D3.js

Question

当执行 import { select } from 'd3' 时，Webpack 将在包中包含 所有 的 d3.js，如下面的 bundle visualization. 所示这个问题可以通过执行 import { select } from 'd3-selection' 来解决，但这有点违背了自动 tree shaking 的目的。

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

我们在 .babelrc 中使用 "modules": false 以保留模块语法并在我们的中使用 'module' resolve webpack.config.js resolve: { mainFields: ['module', 'browser', 'main'] } 为了选择 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

Answer 1

Tree shaking 仅适用于 ES6 模块，因为它们可以进行静态分析。许多库发布的 AMD/CommonJS 不可能，这就是为什么你可能没有看到任何 tree shaking 发生的原因。请看https://advancedweb.hu/2017/02/07/treeshaking

更新:似乎有一个新的 webpack 插件能够对 Common JS 模块进行 tree shaking，https://github.com/indutny/webpack-common-shake .请注意，repo 说它处于 alpha 阶段。