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 dynamicimport()
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 userel=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 injectrel=preload
hints into the document for render-critical initial chunks.
parcel-dynamic-splitting
shows how to split code by dynamicimport()
s in with Parcel.js.
Hope you find this example useful!