我正在开发一个相当大的React Native应用程序，并且在“assets”文件夹中保存了超过20个SVG图像。我想知道是否可以继续从这个文件夹中使用它们，或者从CDN中提供它们会更好。
下面是我的assets文件夹中的一个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>
)}
</>
);
}
2条答案
按热度按时间fwzugrvs1#
如果这些SVG用于使您的应用可用所需的UI控件，则将其推送到CDN没有任何好处。
是的，您的初始应用程序规模会更小，但您会隐藏成本，直到用户开始使用您的应用程序，情况甚至会更糟，因为必须为这些资产中的每一个请求。如果每个用户都能看到这些SVG，您可以想象这意味着多少请求和多少等待时间。
SVG也往往相当小，人们通常可以缩小它们以进一步缩小它们，所以即使超过20个SVG也不应该增加应用程序的大小。
现在这是固执己见，但我一般把CDN的图像是不重要的应用程序加载，即。用户可以在它们加载之前等待它们，然后可以从CDN的所有优点中受益。
jjhzyzn02#
从CDN提供图像。它将使您的应用更小，并提供性能优势，由于缓存。它将允许图像缓存在用户的设备上，从而减少后续请求的加载时间。