Building a Vue 3 Component Library from Scratch (Part 5): How to Use Vite to Package Your Component Library

Building a Vue 3 Component Library from Scratch (Part 5): Packaging with Vite

Advanced Packaging Configuration

In the previous section, we explored basic packaging with Vite's library mode. While it gets the job done, it creates a single bundled file and packages styles together. To address these limitations and enhance our component library, let's delve into some advanced configuration techniques.

Tree Shaking and On-Demand Loading with ES Modules

The magic bullet for achieving on-demand loading lies in a feature called "tree shaking." This is a process where unused code is eliminated during the bundling stage. Modern bundlers like Vite support tree shaking for ES modules (ESM) format by default. This means when you import components from your library in another project using ESM, only the components actually used will be loaded, improving performance and reducing initial bundle size.

To leverage this advantage, we can modify our vite.config.ts to target the ESM format:

TypeScript

rollupOptions: {
  // ... other options
  output: [
    {
      format: "es", // Target ES modules format
      entryFileNames: "[name].mjs", // Use `.mjs` extension for ESM
      preserveModules: true, // Preserve module structure for tree shaking
      exports: "named",
      dir: "dist/es",
    },
  ],
},
        

Use code with caution.

content_copy

With this configuration, Vite will generate an ES module bundle that supports tree shaking, enabling on-demand loading of your components in projects that also use ESM.

Separate Style Bundles for On-Demand Loading

While ES modules enable tree shaking for code, styles still need a separate mechanism for on-demand loading. We can achieve this by instructing Vite to not bundle styles with the component code. Here's how to adjust our configuration:

TypeScript

build: {
  // ... other options
  rollupOptions: {
    // ... other options
    output: {
      // ... other options
      manualChunks: (id) => {
        if (id.includes("node_modules") || id.includes(".css")) {
          return id; // Extract styles and node_modules into separate chunks
        }
        return "[name]"; // Default chunk for components
      },
    },
  },
},
        

Use code with caution.

content_copy

By introducing the manualChunks option, we tell Vite to treat CSS files and dependencies from node_modules as separate chunks during bundling. This allows them to be loaded independently when needed, further optimizing performance.

These refinements ensure your component library offers on-demand loading for both code and styles, enhancing its efficiency and user experience.

Declaration Files for TypeScript Support (Continued)

Now that we've addressed packaging and on-demand loading, let's ensure seamless integration with TypeScript projects.

Using vite-plugin-dts for Automatic Generation

TypeScript relies on declaration files (*.d.ts) to provide type information for components. Manually creating these files can be tedious. To automate this process, we can leverage a plugin called vite-plugin-dts.

Here's how to integrate vite-plugin-dts:

1. Installation: Install the plugin with your package manager:

Bash

pnpm add [email protected] -D -w
        

Use code with caution.

content_copy

1. Import and Configuration: Import the plugin in your vite.config.ts and configure it to generate declaration files alongside your packaged library:

TypeScript

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import dts from "vite-plugin-dts";

export default defineConfig({
  // ... other configurations
  plugins: [
    vue(),
    dts({
      entryRoot: "./src", // Path to your component source code
      outputDir: ["../markliu2013/es/src", "../markliu2013/lib/src"], // Output directories for declaration files (matching component structure)
      tsConfigFilePath: "../../tsconfig.json", // Path to your main tsconfig.json file
    }),
  ],
});
        

Use code with caution.

content_copy

With this setup, running pnpm run build will not only generate the packaged component library but also include corresponding declaration files in the designated output directories. This allows TypeScript projects to leverage type