🏠 back to Observable

How lazy is lazy loading?

Nowadays, you cant type something like


and it works straightaway without needing to require('d3') first, since d3 is lazily loaded. I’m still in the habit of doing something like

d3 = require('d3-selection@2)

first, since I often use just a little bit of D3. I’m curious, though, is this even necessary? That is, are only the modules that are actually used loaded? Or is all of D3 loaded?

Even if only a small bit is loaded, I would think there could still be trouble with version pinning.

Here’s a summary of what gets loaded in both cases. The first request is triggered by referencing d3 in your notebook, the other two by requiring d3-selection:

You can skip the fetch request for package.json by referencing the complete version and path:

d3 = require('d3-selection@2.0.0/dist/d3-selection.min.js')

Note that you shouldn’t base your choice on file size alone. E.g., it is very likely that the browser will have cached the lazy-loaded d3.min.js already.

As for version pinning: There shouldn’t be any breaking updates to the bundled d3 version until Observable implements (and applies) version pinning for notebooks, so I would think that’s it’s safe to use. However, @mbostock can probably give more insight.

1 Like

I hadn’t considered that, thanks! As I think about it, it might really come down to how lazy I am. :slight_smile:

1 Like