3

I have a package with ESM exports, with exported functions that have properties on them:

function Foo() { return 'Foo' }
Foo.displayName = 'Foo'

function Qux() { return 'Qux' }
Qux.displayName = 'Qux'

function Bar() { return 'Bar' + Qux() }
Bar.displayName = 'Bar'

export { Bar, Foo }

And importing only Foo in my app:

import { Foo } from 'pkg1'

console.log(Foo)

when compiling with webpack production mode, Qux is also included in the bundle, unless Qux.displayName = 'Qux' is removed. Bar isn't included.

Both package.jsons have "sideEffects": false.

Is there a way to tell webpack/terser that this statement is side-effect free?

Example repo: https://github.com/elado/tree-shaking-issue

Adding a PURE doesn't work on statements, only function calls.

Qux.displayName = /*@__PURE__*/ 'Qux' // doesn't work

A few not-ideal solutions...

if (process.env.NODE_ENV !== 'production') {
  Qux.displayName = 'Qux'
}

or marking Object.assign function call as pure:

// Qux.js
/*@__PURE__*/ Object.assign(Qux, { displayName: 'Qux' })
elado
  • 8,510
  • 9
  • 51
  • 60

0 Answers0