fix(web): performance issue when generate md5 with large data.url (#587)

reearth · Jul 24, 2023 · 7338624 · 7338624
1 parent ca71b33
commit 7338624
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 20 deletions.
diff --git a/web/src/beta/lib/core/engines/Cesium/Feature/index.tsx b/web/src/beta/lib/core/engines/Cesium/Feature/index.tsx
@@ -92,19 +92,22 @@ export default function Feature({
     Array.isArray(displayType) &&
     displayType.every(k => components[k][1].noFeature && !components[k][1].noLayer);
   const cacheable = !data?.updateInterval;
+  const urlMD5 = useMemo(() => (data?.url ? generateIDWithMD5(data.url) : ""), [data?.url]);
 
   const renderComponent = (k: keyof AppearanceTypes, f?: ComputedFeature): JSX.Element | null => {
     const useSceneSphericalHarmonicCoefficients =
       !!props.sceneProperty?.light?.sphericalHarmonicCoefficients;
     const useSceneSpecularEnvironmentMaps = !!props.sceneProperty?.light?.specularEnvironmentMaps;
 
-    const componentId = generateIDWithMD5(
-      `${layer.id}_${f?.id ?? ""}_${k}_${isHidden}_${
-        data?.url ?? ""
-      }_${useSceneSphericalHarmonicCoefficients}_${useSceneSpecularEnvironmentMaps}_${
-        JSON.stringify(f?.[k]) ?? ""
-      }`,
-    );
+    const componentId =
+      urlMD5 +
+      generateIDWithMD5(
+        `${layer.id}_${
+          f?.id ?? ""
+        }_${k}_${isHidden}_${useSceneSphericalHarmonicCoefficients}_${useSceneSpecularEnvironmentMaps}_${
+          JSON.stringify(f?.[k]) ?? ""
+        }`,
+      );
 
     if (cacheable) {
       const cachedComponent = CACHED_COMPONENTS.get(componentId);
@@ -181,11 +184,13 @@ export default function Feature({
 
           // "noFeature" component should be recreated when the following value is changed.
           // data.url, isVisible
-          const key = generateIDWithMD5(
-            `${layer?.id || ""}_${k}_${
-              data?.url
-            }_${isVisible}_${useSceneSphericalHarmonicCoefficients}_${useSceneSpecularEnvironmentMaps}_${use3dtilesSphericalHarmonicCoefficients}}_${use3dtilesSpecularEnvironmentMaps}`,
-          );
+          const key =
+            urlMD5 +
+            generateIDWithMD5(
+              `${
+                layer?.id || ""
+              }_${k}_${isVisible}_${useSceneSphericalHarmonicCoefficients}_${useSceneSpecularEnvironmentMaps}_${use3dtilesSphericalHarmonicCoefficients}}_${use3dtilesSpecularEnvironmentMaps}`,
+            );
 
           return (
             <C
@@ -200,7 +205,7 @@ export default function Feature({
         })}
       </>
     );
-  }, [areAllDisplayTypeNoFeature, displayType, layer, isHidden, data, props]);
+  }, [areAllDisplayTypeNoFeature, displayType, layer, isHidden, urlMD5, props]);
 
   return (
     <>

diff --git a/web/src/classic/core/engines/Cesium/Feature/index.tsx b/web/src/classic/core/engines/Cesium/Feature/index.tsx
@@ -92,13 +92,14 @@ export default function Feature({
     Array.isArray(displayType) &&
     displayType.every(k => components[k][1].noFeature && !components[k][1].noLayer);
   const cacheable = !data?.updateInterval;
+  const urlMD5 = useMemo(() => (data?.url ? generateIDWithMD5(data.url) : ""), [data?.url]);
 
   const renderComponent = (k: keyof AppearanceTypes, f?: ComputedFeature): JSX.Element | null => {
-    const componentId = generateIDWithMD5(
-      `${layer.id}_${f?.id ?? ""}_${k}_${isHidden}_${data?.url ?? ""}_${
-        JSON.stringify(f?.[k]) ?? ""
-      }`,
-    );
+    const componentId =
+      urlMD5 +
+      generateIDWithMD5(
+        `${layer.id}_${f?.id ?? ""}_${k}_${isHidden}_${JSON.stringify(f?.[k]) ?? ""}`,
+      );
 
     if (cacheable) {
       const cachedComponent = CACHED_COMPONENTS.get(componentId);
@@ -165,7 +166,7 @@ export default function Feature({
 
           // "noFeature" component should be recreated when the following value is changed.
           // data.url, isVisible
-          const key = generateIDWithMD5(`${layer?.id || ""}_${k}_${data?.url}_${isVisible}`);
+          const key = urlMD5 + generateIDWithMD5(`${layer?.id || ""}_${k}_${isVisible}`);
 
           return (
             <C
@@ -180,7 +181,7 @@ export default function Feature({
         })}
       </>
     );
-  }, [areAllDisplayTypeNoFeature, displayType, layer, isHidden, data, props]);
+  }, [areAllDisplayTypeNoFeature, displayType, layer, isHidden, urlMD5, props]);
 
   return (
     <>