Optimizing App Bundle Size

const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin;

module.exports = {
  plugins: [
    new BundleAnalyzerPlugin({
      analyzerMode: "static",
      openAnalyzer: false,
      reportFilename: "bundle-report.html"
    })
  ]
};

// In android/app/build.gradle
project.ext.react = [
    enableHermes: true  // Enable Hermes
]

// In ios/Podfile
use_react_native!(
  :hermes_enabled => true
)

android {
    buildTypes {
        release {
            minifyEnabled true
            shrinkResources true
            proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
        }
    }
}

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

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

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

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import { lazy } from 'react';

const Home = lazy(() => import('./Home'));
const About = lazy(() => import('./About'));

function AppRouter() {
  return (
    <Router>
      <Routes>
        <Route path="/" element=<Home /> />
        <Route path="/about" element=<About /> />
      </Routes>
    </Router>
  );
}

// Before
import _ from 'lodash';

const debouncedFunction = _.debounce(() => {
  console.log('Debounced');
}, 500);

// After
const debouncedFunction = (func, delay) => {
  let timeoutId;
  return (...args) => {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => func(...args), delay);
  };
};

const debouncedFunction = debouncedFunction(() => {
  console.log('Debounced');
}, 500);

// Before
import moment from 'moment';

const formattedDate = moment().format('YYYY-MM-DD');

// After
import dayjs from 'dayjs';

const formattedDate = dayjs().format('YYYY-MM-DD');

<Image
  source={require(&#x27;./assets/image.png&#x27;)}
  style={{ width: 200, height: 200 }}
  resizeMode="cover"
/>

<Image
  source={{ uri: &#x27;https://example.com/image.webp&#x27; }}
  style={{ width: 300, height: 200 }}
/>

android {
    bundle {
        language {
            enableSplit = true
        }
        density {
            enableSplit = true
        }
        abi {
            enableSplit = true
        }
    }
}

export ENABLE_BITCODE=YES

cd android
./gradlew assembleRelease -PstripDebugSymbols=true

import React, { useState } from 'react';

const DynamicComponent = () => {
  const [LoadedComponent, setLoadedComponent] = useState(null);

  const loadComponent = async () => {
    const { default: Component } = await import('./HeavyComponent');
    setLoadedComponent(Component);
  };

  return (
    <div>
      <button onPress={loadComponent}>Load Component</button>
      {LoadedComponent && <LoadedComponent />}
    </div>
  );
};

export default DynamicComponent;