https://github.com/gstcarv/webpack-split-chunks

Spliting package bundles with webpack
https://github.com/gstcarv/webpack-split-chunks

bundle bundle-splitting javascript react webpack

Last synced: about 2 months ago
JSON representation

Spliting package bundles with webpack

• Host: GitHub
• URL: https://github.com/gstcarv/webpack-split-chunks
• Owner: gstcarv
• Created: 2022-08-31T01:44:10.000Z (almost 4 years ago)
• Default Branch: master
• Last Pushed: 2022-08-31T01:52:56.000Z (almost 4 years ago)
• Last Synced: 2025-09-13T01:48:40.592Z (10 months ago)
• Topics: bundle, bundle-splitting, javascript, react, webpack
• Language: JavaScript
• Homepage:
• Size: 708 KB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# webpack split chunks with react

Trying to manage a react bundle in order to split bundle into small splitted js chunks

## Bundle Analisys

| 🚫 Bare webpack bundle                 | ✅ Splitted webpack bundle                     |

| -------------------------------------- | ---------------------------------------------- |

| ![bare bundle](./docs/full_bundle.png) | ![splitted bundle](./docs/splitted_bundle.png) |

|                                        |

## Runtime behaviour

At the first load, webpack will load each splitted package bundles first.

![splitted bundle](./docs/splitted_bundle_network.png)

Webpack will lazy-load Component B when needed with their dependency chunks (moment and lodash).

![splitted bundle](./docs/component_b.png)

When Component A requested, webpack will load it, but will not load lodash again, because it was loaded before.

![splitted bundle](./docs/component_a.png)