Merge pull request Expensify#68727 from callstack-internal/perf/lazy-load-heic-to

Lazy load HEIC conversion library on web

Author: MariaHCD

config/webpack/webpack.common.ts

@@ -342,6 +342,13 @@ const getCommonConfiguration = ({file = '.env', platform = 'web'}: Environment):
                         name: 'lottiePlayer',
                         chunks: 'all',
                     },
+                    // heic-to library is used sparsely and we want to load it as a separate chunk
+                    // to reduce the potential bundled size of the initial chunk
+                    heicTo: {
+                        test: /[\\/]node_modules[\\/](heic-to)[\\/]/,
+                        name: 'heicTo',
+                        chunks: 'all',
+                    },
                     // Extract all 3rd party dependencies (~75% of App) to separate js file
                     // This gives a more efficient caching - 3rd party deps don't change as often as main source
                     // When dependencies don't change webpack would produce the same js file (and content hash)

src/libs/fileDownload/heicConverter/index.ts

@@ -1,6 +1,17 @@
-import {heicTo, isHeic} from 'heic-to';
 import type {HeicConverterFunction} from './types';
 
+type HeicConverter = {
+    heicTo: (options: {blob: Blob; type: string}) => Promise<Blob>;
+    isHeic: (file: File) => Promise<boolean>;
+};
+
+const getHeicConverter = () => {
+    // Use the CSP variant to ensure the library is loaded in a secure context. See https://github.com/hoppergee/heic-to?tab=readme-ov-file#cotent-security-policy
+    // Use webpackMode: "eager" to ensure the library is loaded immediately without evaluating the code. See https://github.com/Expensify/App/pull/68727#issuecomment-3227196372
+    // @ts-expect-error - heic-to/csp is not correctly typed but exists
+    return import(/* webpackMode: "eager" */ 'heic-to/csp').then(({heicTo, isHeic}: HeicConverter) => ({heicTo, isHeic}));
+};
+
 /**
  * Web implementation for converting HEIC/HEIF images to JPEG
  * @param file - The file to check and potentially convert
@@ -23,12 +34,18 @@ const convertHeicImage: HeicConverterFunction = (file, {onSuccess = () => {}, on
         return;
     }
 
-    fetch(file.uri)
-        .then((response) => response.blob())
-        .then((blob) => {
-            const fileFromBlob = new File([blob], file.name ?? 'temp-file', {
-                type: blob.type,
-            });
+    // Start loading the conversion library in parallel with fetching the file
+    const libraryPromise = getHeicConverter().catch((importError) => {
+        console.error('Error loading heic-to library:', importError);
+        // Re-throw a normalized error so the outer catch can handle it uniformly
+        throw new Error('HEIC conversion library unavailable');
+    });
+
+    const fetchBlobPromise = fetch(file.uri).then((response) => response.blob());
+
+    Promise.all([libraryPromise, fetchBlobPromise])
+        .then(([{heicTo, isHeic}, blob]) => {
+            const fileFromBlob = new File([blob], file.name ?? 'temp-file', {type: blob.type});
 
             return isHeic(fileFromBlob).then((isHEIC) => {
                 if (isHEIC || needsConversion) {
@@ -45,19 +62,17 @@ const convertHeicImage: HeicConverterFunction = (file, {onSuccess = () => {}, on
                         .catch((err) => {
                             console.error('Error converting image format to JPEG:', err);
                             onError(err, file);
-                        })
-                        .finally(() => {
-                            onFinish();
                         });
                 }
 
                 onSuccess(file);
-                onFinish();
             });
         })
         .catch((err) => {
             console.error('Error processing the file:', err);
             onError(err, file);
+        })
+        .finally(() => {
             onFinish();
         });
 };