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' })