Description
Description
The sideEffects property indicates whether a package introduces any side effects. It can be specified as either false or as an array of files that have side effects.
By specifying this property, webpack is able to reduce the size of JavaScript bundles by eliminating unused imports:
https://webpack.js.org/guides/tree-shaking/
sideEffects is particularly relevant when implementing feature flags. Without it, features need to be flagged at every possible point. For further details, see this discussion: #13829 (comment)
How to implement this
Packages will need to be assessed individually. The biggest cause of side effects is likely to be registerStore. Any function call in the outer-most scope can result in a side-effect, particularly if there's no return value:
registerStore( //... );
registerBlock( // ... );
Mutation of global or imported variables is another example:
import store from '@wordpress/core-data';
modifyStore( store );
store.foo = bar;
window.shim = window.shim || function() {
// ...
};
Another good indication is any import that doesn't define any new variables. The imported file will almost certainly have side-effects:
import 'something-with-side-effects';
Other ideas
It might be possible to use a linting rule to enforce this. A quick look at npm shows limited prior art, so a custom rule might be needed.