Investigate babel-plugin-optimize-react #15238
eps1lon posted onGitHub
We try to stick to the namespace import of react via import React from 'react';
and then always use member access when using hooks i.e. const [labelWidth, setLabelWidth] = React.useState(0);
.
This has poor minifaction potential (usually member access can't get mangled) and combined with array destructuring this blows up quite a bit:
var _React$useState = _react.default.useState(0),
_React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
labelWidth = _React$useState2[0],
setLabelWidth = _React$useState2[1];
Facebook recently released babel-plugin-optimize-react
which addresses these issues. The PR that would include this into react-scripts
is still open.
Did some earlier testing (https://github.com/eps1lon/material-ui/pull/6) and reductions seemed promising. Since we have now a bigger sample size of hooks usage patterns it would be nice if someone investigates the build changes introduced by this plugin. A branch that includes the build in version control and a diff that shows all the build changes would be nice.