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:
masteris the starting point, where no code splitting or other performance optimizations are set up.
webpack-entry-point-splittingshow how to split code by entry point in Webpack.
webpack-dynamic-splittingshows 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-precacheshows how to use workbox-webpack-plugin to generate a service worker that precaches dynamic chunks when a service worker is installed.
webpack-dynamic-splitting-prefetchshows how to use
rel=prefetchto idly fetch dynamic chunks ahead of time to reduce request latency.
webpack-dynamic-splitting-preloadshows how to use preload-webpack-plugin to inject
rel=preloadhints into the document for render-critical initial chunks.
parcel-dynamic-splittingshows how to split code by dynamic
import()s in with Parcel.js.
Hope you find this example useful!