How to config lodash tree shaking in vite?

@dalton_moen 

To configure lodash tree shaking in Vite, you need to use the config.optimizeDeps option in your vite.config.js file. Here's how you can do it:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

// vite.config.js

import { defineConfig } from 'vite';
import lodashEs from 'vite-plugin-lodash-es';

export default defineConfig({
  plugins: [lodashEs()], // Add the lodash plugin
  optimizeDeps: {
    include: ['lodash/*'], // Specify the lodash functions you want to tree shake
  },
});

In the example above, we are using the vite-plugin-lodash-es plugin to enable lodash tree shaking in Vite. We specify which lodash functions we want to include for tree shaking using the optimizeDeps.include option.

Make sure to install the vite-plugin-lodash-es plugin by running:

1

npm install vite-plugin-lodash-es --save-dev

With this configuration, Vite will only include the specified lodash functions in your final bundle, reducing the bundle size and improving performance.