Geek Answers Handbook

Webpack 2 No Tree Tremor D3.js Correct

Webpack will include everything from d3.js in the package when import { select } from 'd3' executed, as shown in the following package visualization. The problem can be solved with import { select } from 'd3-selection' , but this somewhat worsens the goal of automatic tree shake.

Shaking trees seems to work in simple cases with our non-library code.

We use "modules": false in our .babelrc to save the module syntax and use 'module' in our webpack.config.js resolve: { mainFields: ['module', 'browser', 'main'] } to select code based on d3 module. As you can see, the imported node_modules / d3 / index.js is split into ES6 modules instead of a monolithic browser package or CommonJS export.

Should this be posted as a problem on the gigub webpack page or am I doing something wrong? This uses all the latest library versions ( d3@4.5.0 , webpack@2.2.1 , etc.)

edit: This appears to be related to the following issues:

+7
javascript ecmascript-6 webpack tree-shaking
source share
1 answer

Shaking trees will only work for ES6 modules, because they can be subjected to static analysis. AMD / CommonJS, which publishes many libraries, cannot be, so you probably don't see any tree tremble. See https://advancedweb.hu/2017/02/07/treeshaking

UPDATE: A new webpack plugin is available that can doze off common JS modules, https://github.com/indutny/webpack-common-shake . Please note that the repo says this in alpha.

+1
source share

More articles:


All Articles