Vite JS Tutorial: Manual Chunks Configuration

Welcome to the Vite JS tutorial where we'll dive into the world of modern front-end development! Today, we'll explore Manual Chunks Configuration.

What are Chunks in Vite? 📝

Chunks are subdivisions of a JavaScript bundle that Vite creates during the build process. They help optimize the loading process, making your application faster.

Why Manual Chunks Configuration? 💡

Manual chunks configuration allows you to control how your application's code is divided into chunks. This can significantly improve the loading performance of your application.

Getting Started 🎯

First, let's set up a new Vite project:

bash

npm create vite my-app
cd my-app

Now, open the vite.config.js file in your project root:

javascript

// vite.config.js
import { defineConfig } from 'vite'
export default defineConfig({
  // ... (existing config)
  build: {
    rollupOptions: {
      output: {
        // This is where we'll configure chunks
      }
    }
  }
})

Configuring Manual Chunks 📝

Vite uses Rollup under the hood, and to configure chunks, we'll use Rollup's chunkSize and esbuildMinify options.

ChunkSize

The chunkSize option lets you define the size (in bytes) above which a module will be moved into its own chunk. For example:

javascript

// vite.config.js
export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        chunkSize: 50000, // Each chunk will not exceed 50,000 bytes
      }
    }
  }
})

EsbuildMinify

The esbuildMinify option allows you to control how your code is minified, and you can use it to create minified chunks:

javascript

// vite.config.js
export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        chunkSize: 50000,
        esbuildMinify: true, // Enable minification
        // You can also customize minification options here
      }
    }
  }
})

Example: Splitting a Large Module 🎯

Let's create a simple example to see how manual chunks configuration works. Create a new file called big-module.js:

javascript

// big-module.js
function bigFunction() {
  // Implementation of a large function
}

export default bigFunction

Now, import this module in your main.js file and create a simple component:

javascript

// main.js
import bigFunction from './big-module.js'

function MyComponent() {
  bigFunction()
  // ... (component implementation)
}

export default MyComponent

Finally, update your vite.config.js file to split the code into two chunks:

javascript

// vite.config.js
import { defineConfig } from 'vite'
import { createHtmlPlugin } from 'vite-plugin-html'

export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        chunkSize: 20000, // Each chunk will not exceed 20,000 bytes
        esbuildMinify: true,
      }
    },
    plugins: [
      createHtmlPlugin({
        minify: true,
        inject: {
          data: {
            title: 'My Component',
          },
        },
      }),
    ],
  },
})

Run your Vite development server:

bash

npm run dev

Now, if you inspect your application's source code, you'll see that the big module has been split into two chunks:

main.js (contains MyComponent)
big-module.js (contains the big function)

Vite JS Tutorial: Manual Chunks Configuration

Vite JS Tutorial: Manual Chunks Configuration

What are Chunks in Vite? 📝

Why Manual Chunks Configuration? 💡

Getting Started 🎯

Configuring Manual Chunks 📝

ChunkSize

EsbuildMinify

Example: Splitting a Large Module 🎯

Quiz 📝