âïžJSX optimisation loader to reduce size of React application
JSX optimization webpack loader
Replaces React.createElement
by a local variable, thus reduce "number of characters" per React Element
from 17 to 1, as long local variable would be uglified.
That is not a problem for Preact or Inferno, only to "default" React, as long only React has got "long element creation". See this tweet from Dan Abramov, to find more about it.
This technique also is almost NOT affecting gzipped size, only the real amount of js code, browser has to parse.
This also removes object property access (ie React.createElement), thus:
Chrome
by 5%Safari 11
by 15%Safari 12
by 35%Just open your bundle, and count createElement
inside. Or open any page, and count closing tags </
.
Next multiply by 22. Result is - amount of bytes you would remove from your bundle. For free.
Just add this webpack loader AFTER all other.
in terms of webpack configuration - "after" goes "before", ie top-most loader is the "last" one.
babel "modules" should be "false" - you already should have it, for proper tree-shaking, and this is what this library is counting on.
rules: [
{
test: /\.js$/, // for any js file in your project
use: 'jsx-compress-loader',
},
{
test: /\.js$/,
exclude: /node_modules/,
use: 'babel-loader',
},
];
rules: [
{
test: /\.js$/, // paired with babel loader
exclude: /node_modules/,
use: [
'jsx-compress-loader'
'babel-loader',
],
},
];
pragma jsx
, letting you to change JSX compilation rules. Preact, for example, configure it to produce just h
.MIT