What approaches or libraries have you used to optimize bundle size?

The following approaches and tools are used to optimize bundle size in frontend development:

• Code splitting — dividing code into parts that are loaded as needed (for example, using dynamic import in Webpack).
• Tree shaking — removing unused code during build, supported by bundlers like Webpack, Rollup.
• Minification and compression — reducing file size by removing spaces, comments, and shortening variable names (Terser, UglifyJS).
• Using CDN and caching — for fast loading and resource reuse.
• Dependency optimization — replacing heavy libraries with lighter alternatives, importing only necessary functions.

Example with Webpack dynamic import:

// Instead of a regular import
// import LargeComponent from './LargeComponent';

// Use dynamic import for code splitting
const LargeComponent = React.lazy(() => import('./LargeComponent'));

This allows loading LargeComponent only when it is actually needed, reducing the initial bundle size.