Coming from here
Background:
Currently, the SignIn module is disproportionately large due to two SVG assets:
- 772.21 KiB – home-background--desktop.svg
- 587.19 KiB – home-background--mobile.svg
These files alone account for ~90% of the module’s size and are loaded upfront, regardless of the user’s screen width, which increases the bundle’s initial load time and causes unnecessary fetching of assets for both screen size variants.
Problem:
When large image assets are loaded upfront, they inflate the SignIn module size, which increases load times and causes unnecessary fetching of assets
Solution:
- Lazy-load screen-specific SVGs: Separate the desktop and mobile home-background assets from the SignIn module and use React.lazy() to load only the SVG required for the current screen.
- Remove unused iOS background variant: On BackgroundImage/index.ios.tsx, remove the unreachable home-background asset. The isSmallScreen condition used in BackgroundImage is derived from shouldUseNarrowLayout , which for native is always true, making this condition redundant. As a part of clean up, rename the asset suffix to indicate it is used only for iOS --ios instead of --mobile-new. On android there is no such condition (single variant already).
useResponsiveLayout/index.native.ts
const isSmallScreenWidth = true
const shouldUseNarrowLayout = isSmallScreenWidth || isInNarrowPaneModal
Expected Outcome:
- Reduce SignIn module size from ~1.48 MB to ~156 KB (~90%)
- Bundle with SignIn requires 4176 KB initially, then 532-734 KB for desktop depending screen size, instead of 5437 KB upfront (10-13% reduction total)
- Only when the user changes the screen width, additional asset is fetched (variants only apply on web/desktop)
- Solutions for Android and iOS will be more consistent.
Issue Owner
Current Issue Owner: @sakluger
Coming from here
Background:
Currently, the SignIn module is disproportionately large due to two SVG assets:
These files alone account for ~90% of the module’s size and are loaded upfront, regardless of the user’s screen width, which increases the bundle’s initial load time and causes unnecessary fetching of assets for both screen size variants.
Problem:
When large image assets are loaded upfront, they inflate the SignIn module size, which increases load times and causes unnecessary fetching of assets
Solution:
Expected Outcome:
Issue Owner
Current Issue Owner: @sakluger