React Bundle Optimization

Optimize React bundle for production.

Analyze Bundle

```bash npm install --save-dev webpack-bundle-analyzer ```

```javascript // webpack.config.js const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = { plugins: [new BundleAnalyzerPlugin()] }; ```

Tree Shaking

Import only what you need:

```javascript // Bad import _ from 'lodash';

// Good import debounce from 'lodash/debounce'; ```

Dynamic Imports

```javascript // Instead of import HeavyComponent from './Heavy';

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

Remove Source Maps in Production

```javascript // .env.production GENERATE_SOURCEMAP=false ```

Compress with Gzip/Brotli

Enable in server configuration.

CDN for Dependencies

```html <script src="https://cdn.jsdelivr.net/npm/react@18/umd/react.production.min.js"></script> ```

Remember

- Analyze bundle first - Use dynamic imports - Tree shake unused code - Compress assets - Use CDN when possible

> Next: Learn CI/CD!