Performance Lag with SvgUri from react-native-svg when using Re.Pack V5 (Rspack + MF2)

[longb1997]

Describe the bug

When using the SvgUri component from react-native-svg in a React Native application built with Re.Pack V5 (using Rspack and Module Federation 2), the rendering of SVGs is significantly slow, resulting in noticeable lag or long loading times. This issue is particularly evident when loading SVGs from remote URLs or when rendering multiple SVGs simultaneously.

Simulator.Screen.Recording.-.iPhone.16.Pro.-.2025-07-05.at.16.48.30.mp4

import path from 'node:path';
import {fileURLToPath} from 'node:url';
import * as Repack from '@callstack/repack';
import {createRequire} from 'module';
import {ReanimatedPlugin} from '@callstack/repack-plugin-reanimated';
import TerserPlugin from 'terser-webpack-plugin';

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

const require = createRequire(import.meta.url);
const resolve = require.resolve;

/**
 * Webpack configuration enhanced with Re.Pack defaults for React Native.
 *
 * Learn about webpack configuration: https://webpack.js.org/configuration/
 * Learn about Re.Pack configuration: https://re-pack.dev/docs/guides/configuration
 */
export default env => {
  const {
    mode = 'development',
    context = __dirname,
    entry = './index.js',
    platform = process.env.PLATFORM,
    minimize = mode === 'production',
    devServer = undefined,
  } = env;
  const dirname = Repack.getDirname(import.meta.url);

  if (!platform) {
    throw new Error('Missing platform');
  }
  process.env.BABEL_ENV = mode;

  return {
    mode,
    entry,
    devtool: 'source-map',
    context,
    resolve: {
      ...Repack.getResolveOptions(platform),
        '@': new URL('./src', import.meta.url).pathname,
      },
    },
    output: {
      uniqueName: 'miniApp',
    },
    optimization: {
      minimize,
      minimizer: [
        new TerserPlugin({
          test: /\.(js)?bundle(\?.*)?$/i,
          extractComments: false,
          terserOptions: {
            format: {
              comments: false,
            },
          },
        }),
      ],
      chunkIds: 'named',
    },
    module: {
      rules: [
        ...Repack.getJsTransformRules(),
        ...Repack.getAssetTransformRules(),
        {
          test: /\.[jt]sx?$/,
          type: 'javascript/auto',
          exclude: [/node_modules/],
          use: {
            loader: 'builtin:swc-loader',
            options: {
              env: {
                targets: {'react-native': '0.76.9'},
              },
              jsc: {
                parser: {
                  syntax: 'typescript',
                  jsx: true,
                  dynamicImport: true,
                  decorators: true,
                  topLevelAwait: true,
                },
                assumptions: {
                  setPublicClassFields: true,
                  privateFieldsAsProperties: true,
                },
                externalHelpers: true,
                transform: {
                  react: {
                    runtime: 'automatic',
                  },
                },
              },
            },
          },
        },
        {
          test: Repack.getAssetExtensionsRegExp(
            Repack.ASSET_EXTENSIONS.filter(ext => ext !== 'svg'),
          ),
          use: '@callstack/repack/assets-loader',
        },
        {
          test: /\.svg$/,
          include: /assets\/source\//,
          type: 'asset/source',
        },
        {
          test: /\.svg$/,
          include: /assets\/inline\//,
          type: 'asset/inline',
        },
      ],
    },
    plugins: [
      new Repack.RepackPlugin(),

      new Repack.plugins.ModuleFederationPluginV2({
        name: 'miniApp',
        filename: 'miniApp.container.bundle',
        dts: false,
        exposes: {
          './Root': './src/RouteExpose.tsx',
        },
        shared: {
          react: {
            singleton: true,
            eager: true,
            requiredVersion: '18.3.1',
          },
          'react-native': {
            singleton: true,
            eager: true,
            requiredVersion: '0.76.9',
          },
          'react-native-reanimated': {
            singleton: true,
            eager: true,
            requiredVersion: '3.17.1',
          },
          'react-native-svg': {
            singleton: true,
            eager: true,
            requiredVersion: '*',
          },
        },
      }),
      new ReanimatedPlugin(),
    ],
  };
};

Screen contain SvgUri:

import React, {memo} from 'react';

import {View} from 'react-native';
import {SvgUri} from 'react-native-svg';
const Screen = memo(() => {
  return (
    <View
      style={{
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'red',
      }}>
      <SvgUri
        uri={'https://static-gcdn.basecdn.net/inside/image/bg/2.svg'}
        width={100}
        height={100}
      />
    </View>
  );
});

export default Screen;

System Info

System:
  OS: macOS 15.2
  CPU: (10) arm64 Apple M4
  Memory: 720.50 MB / 16.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 20.18.3
    path: ~/.nvm/versions/node/v20.18.3/bin/node
  Yarn:
    version: 1.22.22
    path: ~/.nvm/versions/node/v20.18.3/bin/yarn
  npm:
    version: 10.8.2
    path: ~/.nvm/versions/node/v20.18.3/bin/npm
  Watchman:
    version: 2025.02.10.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.16.2
    path: /Users/mobile/.rbenv/shims/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 24.2
      - iOS 18.2
      - macOS 15.2
      - tvOS 18.2
      - visionOS 2.2
      - watchOS 11.2
  Android SDK: Not Found
IDEs:
  Android Studio: 2024.3 AI-243.22562.218.2431.13114758
  Xcode:
    version: 16.2/16C5032a
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 11.0.26
    path: /usr/bin/javac
  Ruby:
    version: 3.1.2
    path: /Users/mobile/.rbenv/shims/ruby
npmPackages:
  "@react-native-community/cli":
    installed: 15.1.3
    wanted: 15.1.3
  react:
    installed: 18.3.1
    wanted: 18.3.1
  react-native:
    installed: 0.76.9
    wanted: 0.76.9
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: false
iOS:
  hermesEnabled: Not found
  newArchEnabled: false

Re.Pack Version

5.1.3

Reproduction

none

Steps to reproduce

.