What approaches or libraries were used to optimize the bundle size?

To optimize bundle size in frontend development, several approaches and tools are used:

• Code Splitting: dividing code into parts that are loaded as needed. For example, in Webpack, this is implemented through dynamic import import().

• Tree Shaking: removing unused code from the bundle. Supported by modern bundlers like Webpack and Rollup.

• Minification and Compression: using plugins for minification (e.g., Terser) and gzip/brotli compression on the server.

• Using Lightweight Libraries: replacing heavy libraries with more compact alternatives.

• Lazy Loading: loading components or modules only when necessary.

Example of dynamic import in React with Webpack:

import React, { Suspense, lazy } from 'react';

const HeavyComponent = lazy(() => import('./HeavyComponent'));

function App() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <HeavyComponent />
      </Suspense>
    </div>
  );
}

export default App;