How to tree-shake lodash and mui imports in storybook?

@deron 

Tree-shaking is a process that removes any unused code from your application, which can help reduce the size of your bundle and improve performance. To tree-shake lodash and MUI (Material-UI) imports in Storybook, you can follow these steps:

1. Use ES6 imports: Make sure you are using ES6 imports for lodash and MUI components in your code. This allows Webpack to analyze the imports and determine which parts are being used.
2. Configure Webpack: Update your Webpack configuration to enable tree-shaking. You can do this by setting the mode to production in your Webpack configuration file. This will enable minification and tree-shaking by default.
3. Use named imports: Instead of importing the entire lodash library (import _ from 'lodash'), import only the specific functions you need (import { map, filter, sortBy } from 'lodash'). This way, Webpack can easily identify and remove unused functions.
4. Optimize MUI imports: For Material-UI, make sure you are only importing the components you need. Avoid importing the entire MUI library (import Button from '@mui/material/Button'), and instead import only the specific components you are using (import {Button} from '@mui/material').

By following these steps, you can effectively tree-shake lodash and MUI imports in Storybook, reducing the size of your bundle and improving performance.