malchata / code-splitting-example

A toy app demonstrating how to do code splitting in Webpack.

Code Splitting Example

This is an example sample app that shows how to perform code splitting in Webpack and Parcel. To install, simply git clone and run npm install. From there, you can go with any number of commands:

• To do a dev build, run npm run dev.
• To generate an optimized production build, run npm run build.
• To perform a production build and run the app on a local server, run npm start, and the app will be available at http://localhost:8080/

There are several branches, each of which demonstrate a different kind of code splitting or performance optimization for apps using code splitting:

• master is the starting point, where no code splitting or other performance optimizations are set up.
• webpack-entry-point-splitting show how to split code by entry point in Webpack.
• webpack-dynamic-splitting shows how to split code by dynamic import()s in Webpack. This branch is related to three others that demonstrate various performance enhancements you can use with this type of code splitting:
  • webpack-dynamic-splitting-precache shows how to use workbox-webpack-plugin to generate a service worker that precaches dynamic chunks when a service worker is installed.
  • webpack-dynamic-splitting-prefetch shows how to use rel=prefetch to idly fetch dynamic chunks ahead of time to reduce request latency.
  • webpack-dynamic-splitting-preload shows how to use preload-webpack-plugin to inject rel=preload hints into the document for render-critical initial chunks.
• parcel-dynamic-splitting shows how to split code by dynamic import()s in with Parcel.js.

Hope you find this example useful!