vite-plugin-barrel

A vite port version of next.js optimizePackagesImports

why

Some packages exports lots of modules, it will cause vite transform lots of files in build step. For example, @mui/icons-material exports 1000+ components, it's harmful for vite build performance.

Test on Apple M1 Pro, with this plugin, it improve 50%+ build performance.

install

pnpm add vite-plugin-barrel

usage

// vite.config.ts
import react from '@vitejs/plugin-react'
import { defineConfig } from 'vite'
import { barrel } from 'vite-plugin-barrel'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react(),
    barrel({ packages: ['@mui/material', '@mui/icons-material'] }),
  ],
})

options

options.packages

• Type: string[]

The packages you want to optimize.

options.experimental.intergration

• Type: plugin-react-swc
• Optional

vite-plugin-barrel will use @swc/core to transform code with swc-plugin-barrel. You can pass this plugin directly to @vitejs/plugin-react-swc disable extra transform to improve performance.

// vite.config.ts
import react from '@vitejs/plugin-react-swc'
import { defineConfig } from 'vite'
import { barrel, swc_plugin_barrel } from 'vite-plugin-barrel'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react({
      plugins: [
        swc_plugin_barrel({
          packages: ['@mui/material', '@mui/icons-material']
        })
      ]
    }),
    barrel({
      packages: ['@mui/material', '@mui/icons-material'],
      experimental: {
        intergration: 'plugin-react-swc'
      }
    }),
  ],
})

credits

next.js optimize_barrel

built with ❤️ by 😼