mui-org/material-ui

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.


Fund this Issue

$0.00
Funded
Only logged in users can fund an issue

Pull requests