Webpack 2 Not Tree Shaking D3.js正确

Question

在执行以下捆绑可视化时,Webpack将包括捆绑中的所有 d3.js.问题可以通过这样做来解决,但这有点挫败了自动树摇动的目的.import { select } from 'd3'import { select } from 'd3-selection'

在我们的非库代码中,树摇动似乎在简单的情况下起作用.

我们"modules": false在我们.babelrc中使用以保留模块语法并'module'在webpack.config.js resolve: { 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。请注意，该存储库表示它处于 alpha 状态。