React Native应用中SVG存储方案：本地存储还是CDN加载？

你正在开发大型React Native应用，当前有20余个以React组件形式存在的SVG资源（类似你提供的Message组件），下面针对本地使用和CDN加载两种方案的优劣做具体分析：

一、继续本地使用的优势与注意点 #

• 性能稳定无依赖：本地SVG组件会打包进App，无需网络请求即可渲染，不会受网络波动、离线状态影响，体验更流畅
• 定制性拉满：像你现在的组件支持size、color、filled等动态props，可以直接在业务代码中灵活修改样式，适配不同场景
• 包体积影响极小：20个SVG组件的代码量总和非常有限，后续配合babel-plugin-react-native-svg-transformer做按需引入或Tree Shaking，完全不用担心包体积膨胀问题
• 潜在注意点：若后续SVG数量增长到50+，可针对性做组件拆分或懒加载，但当前20个的量级无需额外处理

二、改用CDN加载的适用场景与局限 #

• 仅适合特定场景：如果SVG资源需要频繁更新（比如运营活动图标），或需要和Web端共用一套资源，CDN加载可以避免App发版更新
• 局限明显：
  • 强依赖网络：弱网或离线时会加载失败，需额外处理占位符或错误状态
  • 丧失动态定制能力：CDN加载的是静态SVG文件，无法像本地组件那样通过props修改颜色、尺寸、填充状态，React Native中实现动态修改成本极高
  • 额外网络开销：每个SVG都需发起独立请求，累计下来性能不如本地渲染高效

三、针对当前情况的建议 #

就20个SVG的量级，继续本地使用是更优选择。你的SVG都是带业务逻辑的动态组件，转CDN会完全丧失灵活性，且对包体积的影响可以忽略不计，性能还更有保障。

如果后续有频繁更新的SVG需求，可单独将这类资源抽离用CDN加载，其余仍保留本地。

你提供的本地SVG组件示例 #

import React from "react";
import Svg, { Path, Line } from "react-native-svg";

interface Props {
  size?: number;
  color?: string;
  filled?: boolean;
}

export default function Message({ color, size, filled }: Props) {
  return (
    <>
      {filled ? (
        <Svg width={size} height={size} viewBox="0 0 22 20" fill="none">
          <Path
            fillRule="evenodd"
            clipRule="evenodd"
            d="M4 0C1.79086 0 0 1.79086 0 4V14C0 16.2091 1.79086 18 4 18H16C18.2091 18 20 16.2091 20 14V4C20 1.79086 18.2091 0 16 0H4ZM4.41603 4.37592C4.07138 4.14616 3.60573 4.23929 3.37597 4.58393C3.1462 4.92858 3.23933 5.39423 3.58398 5.624L7.36518 8.1448C8.9607 9.20848 11.0393 9.20848 12.6348 8.14479L16.416 5.624C16.7607 5.39423 16.8538 4.92858 16.624 4.58393C16.3943 4.23929 15.9286 4.14616 15.584 4.37592L11.8028 6.89672C10.7111 7.6245 9.2889 7.6245 8.19723 6.89672L4.41603 4.37592Z"
            fill={color}
          />
        </Svg>
      ) : (
        <Svg width={size} height={size} viewBox="0 0 22 20" fill="none">
          <Path
            d="M5.41603 5.37596C5.07138 5.1462 4.60573 5.23933 4.37596 5.58397C4.1462 5.92862 4.23933 6.39427 4.58397 6.62404L5.41603 5.37596ZM8.7812 8.5208L9.19723 7.89676L8.7812 8.5208ZM13.2188 8.5208L12.8028 7.89676L13.2188 8.5208ZM17.416 6.62404C17.7607 6.39427 17.8538 5.92862 17.624 5.58397C17.3943 5.23933 16.9286 5.1462 16.584 5.37596L17.416 6.62404ZM5 1.75H17V0.25H5V1.75ZM20.25 5V15H21.75V5H20.25ZM17 18.25H5V19.75H17V18.25ZM1.75 15V5H0.25V15H1.75ZM5 18.25C3.20507 18.25 1.75 16.7949 1.75 15H0.25C0.25 17.6234 2.37665 19.75 5 19.75V18.25ZM20.25 15C20.25 16.7949 18.7949 18.25 17 18.25V19.75C19.6234 19.75 21.75 17.6234 21.75 15H20.25ZM17 1.75C18.7949 1.75 20.25 3.20507 20.25 5H21.75C21.75 2.37665 19.6234 0.25 17 0.25V1.75ZM5 0.25C2.37665 0.25 0.25 2.37665 0.25 5H1.75C1.75 3.20507 3.20507 1.75 5 1.75V0.25ZM4.58397 6.62404L8.36518 9.14484L9.19723 7.89676L5.41603 5.37596L4.58397 6.62404ZM13.6348 9.14484L17.416 6.62404L16.584 5.37596L12.8028 7.89676L13.6348 9.14484ZM8.36518 9.14484C9.9607 10.2085 12.0393 10.2085 13.6348 9.14484L12.8028 7.89676C11.7111 8.62454 10.2889 8.62454 9.19723 7.89676L8.36518 9.14484Z"
            fill={color}
          />
        </Svg>
      )}
    </>
  );
}

内容的提问来源于stack exchange，提问作者Suhail Kakar