Honey, I shrunk the React app

Size does matter sometimes.

Here is the most obvious reason why : a site that takes too long to load ends up with an error on a device.
open-wifi-connect-error_android_f

Or worse, your visitor may become impatient and go to your competitor.

Problem is when you are building your application and you see a webpack log like this one :
2018-07-31_22-12-11

You are not going to ship a file like this one in production. Instead, you are going to use several tips :
1. if you are using a custom webpack config, make sure that you set ‘production’ in the mode
2. import uglifyjs-webpack-plugin in package.json, then add new UglifyJs() to the list of your plugins
3. bundle with preact instead of react, by changing the javascript configuration in your webpack config (make sure to import preact in your package.json file + npm install first) :

test: /\.js$/,
use
: [ {
loader: "babel-loader",
options: {
presets: [["env"], ["react"]],
plugins: [["babel-plugin-transform-react-jsx", { pragma: "h" }]]
}
}
, {
loader: "string-replace-loader",
options: {
multiple: [
{
search: "\r\n",
replace: "\n",
flags: "g"
},
{
search: "import React from 'react'\nimport { render } from 'react-dom'",
replace: "/** @jsx h */\nimport { h, render } from 'preact'"
},
{
search: "import React, { Component } from 'react'",
replace: "/** @jsx h */\nimport { h, Component } from 'preact'"
},
{
search: "import React from 'react'",
replace: "/** @jsx h */\nimport { h } from 'preact'"
}
]
}
}
)]

4. If your are sure enough that your user will never use an outdated browser, remove the polyfills from the bundle :

presets: [["env", { targets: { chrome: 67 } }]

5. Either trust your server to serve your assets compressed, or add the packer plugin (import packer-webpack-plugin then new PackerPlugin() in the plugins list)

Doing another webpack now gives me this result : 22kb
2018-07-31_22-29-02

I am feeling much more confident now.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

This site uses Akismet to reduce spam. Learn how your comment data is processed.