Add side effects property to components package.json

[senadir]

Description

This PR adds sideEffects: false to @wordpress/components in order to enable tree-shaking for that library, having tree shaking reduces build sizes by a significant amount.

before sideEffects

File sizes after gzip:

  256.37 KB  build/static/js/2.7889de9e.chunk.js
  15.45 KB   build/static/css/2.8225445d.chunk.css
  780 B      build/static/js/runtime-main.c4aaabd0.js
  317 B      build/static/js/main.e8a8781c.chunk.js

after sideEffects

File sizes after gzip:

  40.61 KB (-215.77 KB)  build/static/js/2.0646c13c.chunk.js
  15.45 KB               build/static/css/2.8225445d.chunk.css
  780 B                  build/static/js/runtime-main.c4aaabd0.js
  305 B (-12 B)          build/static/js/main.fa03990e.chunk.js

[talldan]

Looks good. I wasn't able to spot any side effects in the package, so this makes sense 👍

[gziolo]

gutenberg/packages/components/package.json

Lines 54 to 57 in 9eea50b

	"sideEffects": [
	"src/date-time/index.js",
	"src/keyboard-shortcuts/index.js"
	]

@talldan, in the past you marked two files, do you remember why?

[gziolo]

gutenberg/packages/components/src/date-time/index.js

Line 6 in a8c0ca9

import 'react-dates/initialize';

gutenberg/packages/components/src/keyboard-shortcuts/index.js

Lines 4 to 5 in a8c0ca9

	import Mousetrap from 'mousetrap';
	import 'mousetrap/plugins/global-bind/mousetrap-global-bind';

I think this is what is concerning in this package. I'm not saying we should change anything, but we should definitely seek a way to avoid those magic imports to make reasoning easier.

[jsnajdr]

I think setting sideEffects to a simple false is fine and special treatment for date-time and keyboard-shortcuts is not necessary.

Yes, these two packages import something that has side-effects, but these don't need to happen unless the consumer of @wordpress/components explicitly imports KeyboardShortcuts or DatePicker. If the consumer imports and used them, then mousetrap and react-dates will initialize and do their side-effects. If the consumer doesn't use these components, the libraries are not imported, because no one needs them.

It would be a problem only if some other component relied implicitly on mousetrap or react-dates initialization, relying on other components to do the import for them.