Boost React App Load Speed with Webpack 4: Proven Optimization Techniques

Although many articles discuss React app loading optimization, the release of React 16 and Webpack 4 has made some older techniques outdated. This guide summarizes effective optimizations for a new project migrated to these versions.

0. Basic Concepts

We first outline the typical page load process (excluding server‑side rendering):

Browser loads an empty page.

HTML and referenced CSS finish loading, triggering the first render . The resources needed for this are called the first‑screen size .

React, React‑DOM, and business code load, and the application renders for the first time ( first content render ).

The app executes, fetches data, performs dynamic imports, handles events, and finally reaches the interactive state.

Lazy‑loaded media (images, etc.) gradually finish loading.

Other resources (error reporting, analytics) load, completing the page load.

We will discuss optimization points for each step.

1. Open Page → First Screen

All major SPA frameworks (React, Vue, Angular) mount the app to a root node. After Webpack bundling, three files are typically produced:

A tiny HTML file (≈1‑4 KB) that only provides the root node.

A large JavaScript bundle (≈50‑1000 KB).

A CSS file (optional if CSS is inlined).

The large JS bundle means the page stays completely blank until it finishes loading and executing.

1.1 Add Content to the Root Node

Placing a simple placeholder in the root node can move the first‑screen time forward to when HTML and CSS finish loading: <div id="root">Loading...</div> Designers may prefer a more polished placeholder, such as an SVG skeleton.

1.2 Use html-webpack-plugin to Insert Loading UI

Manually adding a loading placeholder to every page is cumbersome. The html-webpack-plugin can automatically inject a loading HTML snippet and optional CSS:

var HtmlWebpackPlugin = require('html-webpack-plugin');
var path = require('path');
var loading = {
  html: fs.readFileSync(path.join(__dirname, './loading.html')),
  css: '<style>' + fs.readFileSync(path.join(__dirname, './loading.css')) + '</style>'
};
var webpackConfig = {
  entry: 'index.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'index_bundle.js'
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'xxxx.html',
      template: 'template.html',
      loading: loading
    })
  ]
};

The template can then reference htmlWebpackPlugin.options.loading.html and .css to render the placeholder.

1.3 Use prerender-spa-plugin for Server‑Side Rendering‑like Output

For large projects, a loading component can be pre‑rendered at build time. The plugin starts a static server, runs the app with a headless browser, captures the resulting HTML, and writes it back, achieving near‑SSR results without a real server.

plugins: [
  new PrerenderSpaPlugin(
    path.join(__dirname, 'dist'),
    ['/', '/products/1', '/products/2', '/products/3']
  )
];

1.4 Remove External CSS

Keeping CSS inlined with the JavaScript bundle eliminates an extra request, allowing the browser to render the first screen as soon as HTML finishes loading. Modern Webpack defaults to this; just avoid plugins that extract CSS unless you need them.

2. First Screen → First Content Render

During this phase the browser loads and executes JavaScript. The code can be divided into four categories:

Base framework (React, Vue) – immutable.

Polyfills – needed only for older browsers.

Business utility libraries – shared across features.

Feature‑specific business code.

Optimizing each category improves overall load time.

2.1 Cache the Base Framework

Since framework code rarely changes, set a long cache duration (e.g., Cache‑Control: max‑age=31536000) so browsers reuse it.

2.2 Use Dynamic Polyfills

Static polyfills increase bundle size for users whose browsers already support the features. Services like polyfill.io deliver only the needed polyfills based on the user‑agent.

<script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=Map,Set"></script>

2.3 Split Common Code with SplitChunksPlugin

Webpack 4 replaces CommonsChunkPlugin with SplitChunksPlugin, which automatically extracts shared modules into separate chunks, reducing duplicate downloads across pages.

2.4 Proper Tree Shaking

Ensure Babel does not transform ES modules (set "modules": false in preset‑env) so Webpack can eliminate unused exports. Mark side‑effect‑free packages with "sideEffects": false in package.json to allow further dead‑code removal.

// math.js
export function square(x) { return x * x; }
export function cube(x) { return x * x * x; }

// index.js
import { cube } from './math';
cube(123);

After bundling, unused square is marked with a magic comment and removed by minifiers.

3. First Content Render → Interactive

At this stage the browser loads and initializes components.

3.1 Code Splitting

Instead of a single massive bundle, split code into a main bundle plus lazy‑loaded chunks using dynamic import() or libraries like react-loadable:

import('./math').then(math => {
  console.log(math.add(16, 26));
});

import Loadable from 'react-loadable';
import Loading from './loading-component';
const LoadableComponent = Loadable({
  loader: () => import('./my-component'),
  loading: Loading
});

3.2 Compile to ES2015+ Instead of ES5

Most modern browsers natively support ES2015+ features (classes, async/await, etc.). Serving type="module" scripts to these browsers reduces bundle size and improves execution speed, while older browsers can fall back to an ES5 bundle.

4. Interactive → Content Fully Loaded

Final stage mainly involves loading media assets.

4.1 LazyLoad

Use libraries such as react-lazyload or the Intersection Observer API to defer image loading until they enter the viewport.

4.2 Placeholders

Insert placeholder elements (skeleton screens) to avoid layout shifts while content loads. Existing components like react-placeholder or react-hold can be used.

5. Summary

The article covered ten optimization points:

Implement loading UI or skeleton screens in HTML.

Remove external CSS.

Cache the base framework.

Use dynamic polyfills.

Split common code with SplitChunksPlugin.

Apply Tree Shaking correctly.

Use dynamic import() for code splitting.

Compile to ES2015+ and serve with type="module".

Apply lazy‑loading and placeholders for media.

Additional resources:

GoogleChromeLabs/webpack-libs-optimizations

https://developers.google.com/web/fundamentals/performance/get-started/

Pinterest Progressive Web App Performance Case Study

React and Preact Progressive Web App Performance Case Study: Treebo

The Cost of JavaScript

These techniques can significantly reduce bundle size and improve runtime performance, helping you meet KPI targets for the second half of the year.