I am trying to figure out tree-shaking in Webpack and I noticed that running -webpack -optimize-minimize
on this Example1 is 11kB, while on Example2 it is 7kB.
The library Rambda
has a field module in its package.json
. As far as I can see Webpack doesn't respect it and I need to explicitly refer to the esm
file location.
The question is that a bug or a feature?
Example1
import {add} from 'rambda'
function fn(x) {
return add(2)(x)
}
console.log(fn(3))
Example2
import {add} from 'rambda/dist/rambda.esm.js'
function fn(x) {
return add(2)(x)
}
console.log(fn(3))
I found that this is a documented bug - https://github.com/webpack/webpack/issues/4674
What is the current behavior? When module's package.json contains browser, module & main fields, webpack is bundling browser build by default.
The bug is unresolved for 6 months so the solution is ugly - remove browser field from package.json
, so Webpack
can use module field.