Vite: How to build in library mode with code splitting (multiple chunks)?

Are you tired of bundling your entire application into a single massive JavaScript file? Do you want to take advantage of the benefits of code splitting and lazy loading? Look no further! Vite, the modern and innovative build tool, has got you covered.

What is Vite?

Vite is a modern build tool that provides a fast and efficient way to build modern web applications. It was created by Evan You, the creator of Vue.js, and is designed to work seamlessly with Vue.js, React, and other frameworks. Vite provides a plethora of features, including code splitting, lazy loading, and tree shaking, to name a few.

What is Library Mode?

Library mode in Vite allows you to build your application as a library, which can be consumed by other applications or frameworks. This is particularly useful when you want to create a reusable component library or a framework that can be used across multiple projects.

What is Code Splitting?

Code splitting is a technique used to split your application code into smaller, independent chunks that can be loaded on demand. This approach reduces the initial load size of your application and improves page load times. Vite provides built-in support for code splitting, making it easy to implement in your application.

Why Code Splitting?

Code splitting has several benefits, including:

• Reduced initial load size: By splitting your code into smaller chunks, you can reduce the initial load size of your application, resulting in faster page loads.
• Improved performance: Code splitting allows you to load only the necessary code for a specific feature or component, reducing the amount of JavaScript that needs to be parsed and executed.
• Lazy loading: Code splitting enables lazy loading, which allows you to load components or features only when they are needed, reducing the initial load size and improving performance.

How to Build in Library Mode with Code Splitting?

Now that we’ve covered the basics, let’s dive into the meat of the article – how to build in library mode with code splitting using Vite.

Step 1: Create a New Vite Project

Create a new Vite project using the following command:

npx vite new my-vite-project

This will create a new Vite project with a basic file structure.

Step 2: Configure Vite

Open the `vite.config.js` file and add the following configuration:

import { defineConfig } from 'vite';
import { resolve } from 'path';

export default defineConfig({
  build: {
    lib: {
      entry: 'src/index.js',
      name: 'my-library',
      fileName: 'my-library',
    },
    rollupOptions: {
      output: {
        chunkFileNames: 'chunks/[name].[hash].js',
      },
    },
  },
});

This configuration tells Vite to build our application as a library, with the entry point being `src/index.js`. We’re also configuring the output chunk file names to include a hash for cache busting.

Step 3: Create Multiple Chunks

Create a new file called `src/utils.js` and add the following code:

export function add(a, b) {
  return a + b;
}

export function subtract(a, b) {
  return a - b;
}

This file contains two utility functions that we want to split into separate chunks.

Step 4: Import and Use Chunks

Open the `src/index.js` file and add the following code:

import { add } from './utils';
import { subtract } from './utils';

console.log(add(2, 2)); // Output: 4
console.log(subtract(4, 2)); // Output: 2

We’re importing and using the `add` and `subtract` functions from the `utils.js` file.

Step 5: Build and Serve

Run the following command to build and serve your application:

npx vite build && npx vite serve

This will build your application and serve it at http://localhost:3000.

Step 6: Verify Code Splitting

Open the browser developer tools and navigate to the Network tab. You should see multiple chunks being loaded, each with a unique hash:

Chunk Name	Size (KB)
chunks/utils.add.[hash].js	1.2 KB
chunks/utils.subtract.[hash].js	1.1 KB

As you can see, Vite has successfully split our code into multiple chunks, each with its own unique hash.

Conclusion

In this article, we’ve covered how to build in library mode with code splitting using Vite. We’ve learned how to configure Vite, create multiple chunks, and import and use them in our application. By following these steps, you can take advantage of the benefits of code splitting and lazy loading, resulting in faster page loads and improved performance.

Further Reading

For more information on Vite and its features, I recommend checking out the following resources:

• Vite Build Guide
• Vite Code Splitting Guide
• Vite Library Mode Guide

I hope this article has been informative and helpful. Happy coding!

Frequently Asked Question

Unravel the mystery of building in library mode with code splitting in Vite, and discover the secret to creating optimized multiple chunks.