Tree shaking would not work on object exports

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

Created & updated on 2022-10-25.

javascripttree-shakingesm

Assume a module export.js for exports:

js
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:

js
// A import obj from './export.js' console.log(obj.a)
js
// B import * as obj from './export.js' console.log(obj.a)
js
// C import * as obj from './export.js' K = 'a' console.log(obj[K])
js
// 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.

Copyright (C) 2020, 2021, 2022 myl7
The posts are licensed under CC BY-SA 4.0 by default unless otherwise explicitly stated.
The posts with different licenses would contain a section named License to indicate their respective licenses.
The website source code and raw post text/image files are available on myl7/mylmoe
The website favicon is made and authorized for the use by Freepik from flaticon.com