javascript - Webpack 2 不能正确摇树 D3.js

Question

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

Answer 1

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

更新：似乎有一个新的 webpack 插件能够摇树通用 JS 模块，https://github.com/indutny/webpack-common-shake。请注意，repo 说它是 alpha 版本。