React Native中require加载静态图片过慢的问题咨询与优化

我正在使用Ignite React Native模板，编写了如下用于引入所有图标资源的Icon组件：

import { ComponentType } from "react"
import {
  Image,
  ImageStyle,
  Pressable,
  StyleProp,
  TouchableOpacity,
  TouchableOpacityProps,
  View,
  ViewStyle,
} from "react-native"
import Ripple from "react-native-material-ripple"

import clsxm from "../../lib/clsxm"

export type IconTypes = keyof typeof iconRegistry

interface IconProps extends TouchableOpacityProps {
  icon: IconTypes
  color?: string
  size?: number
  className?: string
  containerStyle?: StyleProp<ViewStyle>
  onPress?: TouchableOpacityProps["onPress"]
  preset?: "default" | "ripple" | "opacity" | "image"
}

/**
 * A component to render a registered icon.
 * It is wrapped in a <TouchableOpacity /> if `onPress` is provided, otherwise a <View />.
 */
export function Icon(props: IconProps) {
  const {
    icon,
    color,
    size,
    className,
    containerStyle: $containerStyleOverride,
    preset = "default",
    style,
    ...WrapperProps
  } = props

  const isPressable = !!WrapperProps.onPress
  const Wrapper: ComponentType<TouchableOpacityProps> = WrapperProps?.onPress
    ? preset === "ripple"
      ? Ripple
      : preset === "opacity"
      ? TouchableOpacity
      : Pressable
    : View

  return (
    <Wrapper
      accessibilityRole={isPressable ? "imagebutton" : undefined}
      {...WrapperProps}
      style={$containerStyleOverride}
      rippleSize={110}
    >
      <Image
        style={[$imageStyle, color && { tintColor: color }, size && { width: size, height: size }]}
        className={clsxm(className)}
        source={iconRegistry[icon]}
      />
    </Wrapper>
  )
}

export const iconRegistry = {
  plus: require("../../../assets/icons/plus.png"),
  box: require("../../../assets/icons/box.png"),
  close: require("../../../assets/icons/close.png"),
  search: require("../../../assets/icons/search.png"),
  back: require("../../../assets/icons/back.png"),
  bell: require("../../../assets/icons/bell_new.png"),
  caretLeft: require("../../../assets/icons/caretLeft.png"),
  caretRight: require("../../../assets/icons/caretRight.png"),
  check: require("../../../assets/icons/check.png"),
  clap: require("../../../assets/icons/clap.png"),
  community: require("../../../assets/icons/community.png"),
  components: require("../../../assets/icons/components.png"),
  debug: require("../../../assets/icons/debug.png"),
  github: require("../../../assets/icons/github.png"),
  heart_new: require("../../../assets/icons/heart_new.png"),
  hidden: require("../../../assets/icons/hidden.png"),
  ladybug: require("../../../assets/icons/ladybug.png"),
  lock: require("../../../assets/icons/lock.png"),
  menu: require("../../../assets/icons/menu_new.png"),
  more: require("../../../assets/icons/more.png"),
  pin: require("../../../assets/icons/pin.png"),
  podcast: require("../../../assets/icons/podcast.png"),
  settings: require("../../../assets/icons/settings.png"),
  slack: require("../../../assets/icons/slack.png"),
  view: require("../../../assets/icons/view.png"),
  x: require("../../../assets/icons/x.png"),
  melon: require("../../../assets/icons/melon.png"),
  chatIcon: require("../../../assets/icons/bottom/chat.png"),
  chatFilledIcon: require("../../../assets/icons/bottom/chat_fill.png"),
  homeIcon: require("../../../assets/icons/bottom/home.png"),
  homeFilledIcon: require("../../../assets/icons/bottom/home_fill.png"),
  locationIcon: require("../../../assets/icons/bottom/location.png"),
  locationFilledIcon: require("../../../assets/icons/bottom/location_fill.png"),
  newspaperIcon: require("../../../assets/icons/bottom/newspaper.png"),
  newspaperFilledIcon: require("../../../assets/icons/bottom/newspaper_fill.png"),
  userIcon: require("../../../assets/icons/bottom/profile.png"),
  userFilledIcon: require("../../../assets/icons/bottom/profile_fill.png"),
  car: require("../../../assets/icons/car.png"),
  house: require("../../../assets/icons/house.png"),
  food: require("../../../assets/icons/food.png"),
  work: require("../../../assets/icons/work.png"),
}

const $imageStyle: ImageStyle = {
  resizeMode: "contain",
}

启动应用时，我发现静态图片加载速度比react-native-fast-image加载的远程图片更慢。作为React Native新手，我想咨询两个问题：

1. 这种慢加载是否仅存在于开发模式？
2. 有哪些方法可以加快静态图片加载速度？

1. 慢加载是否仅存在于开发模式？ #

是的，开发模式下静态图片加载慢是普遍现象：

• 开发模式会禁用图片缓存、资源压缩等优化，优先保证热重载和调试的便捷性；
• 每次加载图片都会直接读取本地文件，而非使用预打包的优化资源；
• 生产打包时，Metro会自动对静态图片进行压缩、打包处理，加载速度会大幅提升。

2. 加快静态图片加载的方法 #

（1）优化图片资源本身 #

• 转WebP格式：React Native 0.64+原生支持WebP，它的体积比PNG小25%-35%，能显著减少加载时间；
• 压缩图片：用TinyPNG、Squoosh等工具压缩图标，在不损失清晰度的前提下缩小文件体积；
• 适配多分辨率：按照iOS@2x/@3x、Android mdpi/hdpi等规范准备对应尺寸的图标，避免运行时缩放消耗性能。

（2）调整组件实现逻辑 #

• 替换为react-native-fast-image：它不仅支持远程图片，也能加载本地资源，自带的缓存机制可以提升加载速度；
• 预加载图标：在应用启动阶段（比如闪屏页）提前加载常用图标，示例代码：

  // 放在App.tsx或启动根组件中
  useEffect(() => {
    Object.values(iconRegistry).forEach(source => {
      Image.prefetch(source.uri);
    });
  }, []);
  

• 改用SVG图标：将PNG图标转为SVG格式，用react-native-svg组件渲染。SVG是矢量图，体积小、无失真，还能通过代码直接控制颜色和尺寸，无需多套资源。

（3）优化打包配置 #

• 开启Metro图片优化：在metro.config.js中配置支持WebP并启用资源优化：

  const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');
  
  module.exports = mergeConfig(getDefaultConfig(__dirname), {
    resolver: {
      assetExts: [...getDefaultConfig(__dirname).resolver.assetExts, 'webp'],
    },
  });
  

• 开发模式启用缓存：启动Metro时添加--cache参数，减少重复编译和资源加载时间：

  npx react-native start --cache
  

内容的提问来源于Stack Exchange，提问作者Alijonov