Webpack 2 不能正确摇树 D3.js答案

【问题标题】：Webpack 2 Not Tree Shaking D3.js ProperlyWebpack 2 不能正确摇树 D3.js
【发布时间】：2017-06-27 20:22:12
【问题描述】：

在执行import { select } from 'd3' 时，Webpack 将在捆绑包中包含 all 的 d3.js，如下所示 bundle visualization. 可以通过执行 import { select } from 'd3-selection' 来解决问题，但这违背了自动摇树。

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

我们在.babelrc 中使用"modules": false 以保留模块语法，并在webpack.config.js 中使用'module' 解析resolve: { mainFields: ['module', 'browser', 'main'] } 以选择d3 基于模块的代码。如您所见，导入的 node_modules/d3/index.js 被划分为 ES6 模块，而不是单一的浏览器包或 CommonJS 导出。

这应该作为问题发布在 webpack github 页面上还是我做错了什么？这是使用所有最新版本的库（d3@4.5.0、webpack@2.2.1 等）

编辑：似乎这与以下问题有关：

【问题讨论】：

只是想评论一下我在使用 Webpack 2.2.1 和 d3 4.6.0 时遇到了同样的问题。摇树确实适用于其他图书馆。如果您找到任何解决方案，请发表评论。
看起来有一个新的 webpack 插件来处理 Common JS。请查看我的更新答案。
虽然明显的错误正在修复（如果可能的话），我会考虑从更具体的模块导入。例如。 import {select} from 'd3-selection'，甚至是import select from 'd3-selection/src/select'。

标签： javascript d3.js webpack ecmascript-6 tree-shaking

【解决方案1】：

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

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

【讨论】：