https://github.com/KrishGarg/vite-react-vendor-split-template

A vite template which adds vendor splitting to vite to help in code-splitting.
https://github.com/KrishGarg/vite-react-vendor-split-template

Last synced: about 1 month ago
JSON representation

A vite template which adds vendor splitting to vite to help in code-splitting.

• Host: GitHub
• URL: https://github.com/KrishGarg/vite-react-vendor-split-template
• Owner: KrishGarg
• Created: 2021-12-05T06:48:55.000Z (about 3 years ago)
• Default Branch: main
• Last Pushed: 2021-12-05T06:59:12.000Z (about 3 years ago)
• Last Synced: 2024-08-05T17:25:38.838Z (5 months ago)
• Language: TypeScript
• Size: 18.6 KB
• Stars: 8
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-random - Vite + React + Vendor Chunk Splitting - splitting technique by splitting the vendor chunk. More info in the README of the repository. (Web Development)

README

        
# Vite React with Vendor-Splitting template.

# Credits: [Sambit Sahoo](https://sambitsahoo.com/blog/vite-code-splitting-that-works.html)

**Note:** You can remove `react-icons` as it is only installed for the example.

## Quick Clone:

```shell

npx degit KrishGarg/vite-react-vendor-split-template#main

```

## Example:

Keep looking in the Network tab and the Sources tab to see the real power of code splitting.

https://vite-react-vendor-split.surge.sh/

## So, what is this?

First of all, if you don't know what code-splitting is, I would suggest checking the [official page](https://reactjs.org/docs/code-splitting.html) in the react docs.

By default, vite does support code-splitting, but it only splits the app-specific code. What I mean by that is whatever code we write, is app specific. So, what is not app-specific? The third-party dependencies! If we use React.lazy + Suspense, vite will split the bundles for the lazy components and load them only when rendered, but vite does not, by default, split the dependencies.

Vite just packs all the dependencies in a `vender.[hash].js` which is sent to the client whenever they load our website. We usually use a lot of 3rd party dependencies but we know that not all components/routes needs all the dependencies, thats why we have code-splitting!

So to fix this issue of the browser being sent all the dependencies at once, in this template, we split the vendor in multiple bundles. So in the end production build, we will have,

- `index.[hash].js`: Our entry app-specific code.

- `[lazyComponentName].[hash].js`: All the lazy components will be automatically separated in bundles by vite.

- `vendor.[hash].js`: This will have the global dependencies like `react`, `react-dom` and `react-router-dom`. This will be sent on loading any page, as these are needed in all routes.

- `[packageName].[hash].js`: All the dependencies will be minified and splitted in separate bundles.

Now lets say you have a component named `Sample` and it imports something from `react-icons` package. When you lazy-render `Sample` using React.lazy and Suspense, it will fetch `Sample.[hash].js` and `react-icons.[hash].js`.