mylmoe

Tree shaking would not work on object exports


updated & published on raw


Abstract: Exporting multiple things as an object (as expected) means always bundling them together. And there are more discussions about how to export multiple things.


Assume a module export.js for exports:

export default {
  a: a,
  b: b,
}

export const a = 'short'

export const b = 'long: ...'
// b is not used and very long, e.g., 1MB

Then we try to import a only from export.js in different ways:

// A
import obj from './export.js'
console.log(obj.a)
// B
import * as obj from './export.js'
console.log(obj.a)
// C
import * as obj from './export.js'
K = 'a'
console.log(obj[K])
// D
import(/* webpackMode: "eager" */ './export.js').then(({ a }) => console.log(a))

Finally, bundle them respectively with webpack. Then check the output sizes.

The result is that, ONLY B is small, and others all include the unused b.

The post is related with Next.js image optimization together with next-mdx-remote. More experiments are required so I can not just assert here. To put simply, ordinary solutions to reuse Next.js image optimization in next-mdx-remote cause any post page to include all image metadata, even though it does not use the images.