Analyzing and optimizing Vite bundle size

Sometimes when building a JavaScript app with Vite, it complains about bundle size:

Analyzing

1. Install rollup-plugin-visualizer

   pnpm add rollup-plugin-visualizer

2. Add rollup-plugin-visualizer to vite.config.ts:

   import { visualizer } from 'rollup-plugin-visualizer'
   
   export default defineConfig({
     // ...
     plugins: [
       // ...
       visualizer(),
     ],
   })

3. Run pnpm build and open stats.html in browser. (Add stats.html to .gitignore)

This should show a graph of bundle size. You can see which packages are taking up the most space.

Optimizing

Update vite.config.ts and add build.rollupOptions.output.manualChunks:

export default defineConfig({
  // ...
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          zxing: ['@zxing/browser', '@zxing/library'],
          react: ['react', 'react-dom'],
        },
      },
    },
  },
})