Webpack 4 has added a new feature: it now supports a sideEffects
flag in the package.json
of the modules it is bundling.
From Webpack 4: released today
Over the past 30 days we have worked closely with each of the frameworks to ensure that they are ready to support webpack 4 in their respective cli’s etc. Even popular library’s like lodash-es, RxJS are supporting the sideEffects flag, so by using their latest version you will see instant bundle size decreases out of the box.
From Webpack docs
The "sideEffects": false flag in big-module's package.json indicates that the package's modules have no side effects (on evaluation) and only expose exports. This allows tools like webpack to optimize re-exports.
Whilst the second link shows the results of using the flag, it doesn't clearly explain what constitutes a side-effect. ES6 includes the concept of side-effects for modules as outlined here, but how does this relate to what Webpack considers side-effects.
In the context of the sideEffects
flag, what does a module need to avoid to use sideEffects:false
without issues, or conversly, what does a module need to do in order to use sideEffects:false
without issues.
For completeness, despite @SeanLarkin's solid answer below, I would love to get clarification on the following:
Obviously side-effects means something particular in fp and would include logging (console or elsewhere) and the throwing of errors. I'm assuming in this context these are perfectly acceptable?
Can a module contain circular references and still use
sideEffects: false
?Is there any way to verify or that a module is able to verify that a module can
sideEffects: false
beyond trying to track down errors caused by its misuse?Are there any other factors that would prevent a module from being able to use
sideEffects: false
?