PRPL example with Webpack 2 and React

Demonstrating PRPL in 7 steps - from a bundled app to code splitting and chunk preloading.

You can also see the preso that accompanies this source code sample.

Stack

• Webpack 2
• React 15.4
• Babel 6

Steps

• Step 0 - Bundled application
• Step 1 - Route Splitting
• Step 2 - Preload and parse JS with React Router's getComponent
• Step 3 - Preload with '' and React Helmet
• Step 4 - Custom Webpack plugin that creates a JSON file with chunk names
• Step 5 - Custom Webpack 2 plugin that automatically injects chunk information into HTML. Still using React Helmet to preload chunks
• Step 6 - Removed React Helmet dependency and injecting code with raw JS (simplicity FTW)

Browser setup

I recommend you use Google Chrome with the following setup to benchmark the differences:

• Clean browser, no plugins (private mode is fine)
• Disable caching
• Bandwidth throttling to Regular 3G
• CPU throttling to 5x slowdown

All of these are in Network and Timeline tabs of Chrome DevTools.

System Requirements

Before installing the dependencies, make sure your system has the correct Node and Npm versions.

• Node 6+
• Npm 3+

Setup

$ npm install

Running in Dev mode

$ npm start

Running in Prod mode

$ npm run prod

Need help?

Reach out, we'd love to see how we can help your project.