Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Rewrite imports/requires for easier treeshaking #24

Open
thomaswilburn opened this issue May 31, 2022 · 0 comments
Open

Rewrite imports/requires for easier treeshaking #24

thomaswilburn opened this issue May 31, 2022 · 0 comments

Comments

@thomaswilburn
Copy link
Contributor

When using the Rollup bundler (and possibly with the older Browserify bundler, but I haven't tested that), treeshaking will dramatically reduce the size of D3--but only if the imports are discoverable through explicit imports, exports. For example, the current setup:

var d3 = {
  ...require("d3-scale")
}

...will effectively load all of d3-scale, totalling I think about 100KB of code. Whereas if only the functions that are actually used get imported...

var { scaleLinear } = require("d3-scale");

var d3 = { scaleLinear };

Then the bundler can cull everything that isn't directly relevant to linear scales, meaning that the bundle size can drop quite a bit.

Whether this delivers benefits when you're actually loading all the things that a typical graphic might use, I'm not sure, but initial tests on a renderStackedGroupedColumn() graphic (which has is probably on the upper side of template imports) indicates that it went from 219KB when deployed to 147KB, which is not nothing. The header ends up looking something like this:

var { select } = require("d3-selection");
var { scaleBand, scaleLinear, scaleOrdinal } = require("d3-scale");
var { axisBottom, axisLeft } = require("d3-axis");

var d3 = {
  select,
  scaleBand, scaleLinear, scaleOrdinal,
  axisBottom, axisLeft
};

If we didn't bother re-wrapping the d3 object and just used the imported functions, it also improves the initial import ergonomics a little (no double-declarations needed) at the cost of making it less obvious when you're using the library in the actual code.

Ironically, it performs better when using the un-minified versions than the /dist/d3-whatever.min version, which might also help make error traces a bit more readable.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant