Refactor ReactInjectPlugin to include MsApplicationTileImage as a nullable parameter in the constructor. Introduce a new Gallery block for product images with image preloading functionality. Update README.md with JavaScript optimization configuration details and add support for base64 image encoding in product configuration. Enhance tests with shared mock classes to streamline testing process.

Author: Genaker

Block/Product/View/Gallery.php

@@ -0,0 +1,62 @@
+<?php
+
+namespace React\React\Block\Product\View;
+
+use Magento\Catalog\Block\Product\View\Gallery as MagentoGallery;
+use React\React\Features\ImagePreload;
+
+class Gallery extends MagentoGallery
+{
+    /**
+     * @var ImagePreload
+     */
+    protected $imagePreload;
+
+    /**
+     * @param \Magento\Catalog\Block\Product\Context $context
+     * @param \Magento\Framework\Stdlib\ArrayUtils $arrayUtils
+     * @param \Magento\Framework\Json\EncoderInterface $jsonEncoder
+     * @param ImagePreload $imagePreload
+     * @param array $data
+     * @param \Magento\Catalog\Model\Product\Image\UrlBuilder|null $urlBuilder
+     */
+    public function __construct(
+        \Magento\Catalog\Block\Product\Context $context,
+        \Magento\Framework\Stdlib\ArrayUtils $arrayUtils,
+        \Magento\Framework\Json\EncoderInterface $jsonEncoder,
+        ImagePreload $imagePreload,
+        array $data = [],
+        \Magento\Catalog\Model\Product\Image\UrlBuilder $urlBuilder = null
+    ) {
+        $this->imagePreload = $imagePreload;
+        parent::__construct($context, $arrayUtils, $jsonEncoder, $data, null, [], $urlBuilder);
+    }
+
+    /**
+     * Preload mobile hero image using HTTP Link header
+     * 
+     * @param string $imageUrl The URL of the image to preload
+     * @param bool $isBase64 Whether the image is base64 encoded
+     * @return void
+     */
+    public function preloadMobileImage($imageUrl, $isBase64 = false)
+    {
+        if (!$isBase64 && !empty($imageUrl) && !headers_sent()) {
+            // Use PHP header() function directly to avoid Magento code generation issues
+            header("Link: <" . $imageUrl . ">; rel=preload; as=image; fetchpriority=high", false);
+        }
+    }
+
+    /**
+     * Check if base64 image encoding is enabled
+     * 
+     * @return bool
+     */
+    public function isBase64ImageEnabled()
+    {
+        return $this->_scopeConfig->isSetFlag(
+            'react_vue_config/product/base64_image',
+            \Magento\Store\Model\ScopeInterface::SCOPE_STORE
+        );
+    }
+}

Features/ImagePreload.php

@@ -0,0 +1,49 @@
+<?php
+
+namespace React\React\Features;
+
+class ImagePreload
+{
+    /**
+     * Preload image using HTTP Link header
+     * 
+     * @param string $imageUrl The URL of the image to preload
+     * @param bool $isBase64 Whether the image is base64 encoded (skip preload if true)
+     * @param string $fetchpriority Priority level: 'high', 'low', or 'auto' (default: 'high')
+     * @return void
+     */
+    public function preloadImage($imageUrl, $isBase64 = false, $fetchpriority = 'high')
+    {
+        if (!$isBase64 && !empty($imageUrl)) {
+            // Use @header() with false parameter to allow setting header even after headers started
+            // This matches the pattern used in ReactInjectPlugin.php
+            @header("Link: <" . $imageUrl . ">; rel=preload; as=image; fetchpriority=" . $fetchpriority, false);
+        }
+    }
+
+    /**
+     * Preload multiple images using HTTP Link header
+     * 
+     * @param array $imageUrls Array of image URLs to preload
+     * @param bool $isBase64 Whether the images are base64 encoded (skip preload if true)
+     * @param string $fetchpriority Priority level: 'high', 'low', or 'auto' (default: 'high')
+     * @return void
+     */
+    public function preloadImages(array $imageUrls, $isBase64 = false, $fetchpriority = 'high')
+    {
+        if ($isBase64 || headers_sent() || empty($imageUrls)) {
+            return;
+        }
+
+        $links = [];
+        foreach ($imageUrls as $imageUrl) {
+            if (!empty($imageUrl)) {
+                $links[] = "<" . $imageUrl . ">; rel=preload; as=image; fetchpriority=" . $fetchpriority;
+            }
+        }
+
+        if (!empty($links)) {
+            header("Link: " . implode(", ", $links));
+        }
+    }
+}

README.md

@@ -36,6 +36,86 @@ php bin/magento config:set dev/js/move_script_to_bottom 1
 
 ![React + Magento 2](https://github.com/Genaker/reactmagento2/blob/master/KnockoutMagento2React.png)
 
+## JavaScript Optimization Configuration
+
+To optimize JavaScript performance with existing Magento JS no JS changes needed!!, configure the following settings:
+
+**Important:** This module uses native Magento JavaScript methods and APIs. No custom JavaScript modifications are required - all optimizations work with Magento's existing JavaScript implementation out of the box. The module leverages Magento's built-in JavaScript functionality (`requirejs`, `mage/requirejs/mixins.js`, `requirejs-config.js`, etc.) without replacing or modifying core Magento JS files. The module leverages Magento's built-in JavaScript functionality (`requirejs`, `mage/requirejs/mixins.js`, `requirejs-config.js`, etc.) without replacing or modifying core Magento JS files.
+
+### 1. Move JS to Bottom (Defer JS)
+Enable the module's "Defer JS" feature to move JavaScript files to the bottom of the page for better performance. Scripts with `no-defer` attribute are preserved in their original position.
+
+**Via Admin Panel:**
+- Go to: Stores > Configuration > React-Luma integration > Configuration > Magento JS configuration
+- Set "Defer JS (Move Scripts to Bottom)" to "Yes"
+- Save config and clear cache
+
+**Via CLI:**
+```bash
+php bin/magento config:set react_vue_config/junk/defer_js 1
+php bin/magento cache:clean
+```
+
+**Via GET Parameter (for testing):**
+- Add `?defer-js=true` to any URL to enable temporarily
+- Add `?defer-js=false` to disable temporarily
+
+### 2. Disable JavaScript Bundling (!Important)
+**Important:** Disable Magento's JavaScript bundling to prevent conflicts and ensure proper script loading order.
+
+**Why disable bundling?**
+Magento's JavaScript bundling or any other MAgento bundlings creates large combined JavaScript files that block page rendering and increase blocking time. When bundling is enabled:
+- Multiple JavaScript files are combined into large bundles that must be downloaded and parsed before the page can become interactive
+- This increases **Total Blocking Time (TBT)** and delays **Time to Interactive (TTI)**
+- Large bundles prevent parallel script loading and caching optimization
+- Scripts that could load asynchronously are forced to load synchronously in the bundle
+- Individual script updates require re-downloading the entire bundle
+
+By disabling bundling:
+- Scripts can load in parallel, reducing blocking time
+- Individual scripts can be cached independently
+- Smaller files load faster and parse quicker
+- Better browser caching - only changed scripts need to be re-downloaded
+- Improved performance metrics (LCP, FCP, TBT, TTI)
+
+**Note:** Never use Magento JavaScript bundling - it doesn't have a positive influence on Core Web Vitals and actually degrades performance metrics.
+
+**Via CLI:**
+```bash
+php bin/magento config:set dev/js/enable_js_bundling 0
+php bin/magento cache:clean
+```
+
+**Via Admin Panel:**
+- Go to: Stores > Configuration > Advanced > Developer > JavaScript Settings
+- Set "Enable JavaScript Bundling" to "No"
+- Save config and clear cache
+
+### 3. Enable JavaScript Minification
+Enable JavaScript minification to reduce file sizes and improve page load times.
+
+**Via CLI:**
+```bash
+php bin/magento config:set dev/js/minify_files 1
+php bin/magento cache:clean
+```
+
+**Via Admin Panel:**
+- Go to: Stores > Configuration > Advanced > Developer > JavaScript Settings
+- Set "Minify JavaScript Files" to "Yes"
+- Save config and clear cache
+
+**Note:** In production mode, the Developer section may be hidden in the Admin Panel. Use CLI commands instead.
+
+### Complete JavaScript Optimization Setup
+Run all three commands together for optimal JavaScript performance:
+```bash
+php bin/magento config:set react_vue_config/junk/defer_js 1
+php bin/magento config:set dev/js/enable_js_bundling 0
+php bin/magento config:set dev/js/minify_files 1
+php bin/magento cache:clean
+```
+
 # Updates:
 - VueJS implementation 
 - Magento Configuration enable React, VueJS

ReactInjectPlugin.php

@@ -48,11 +48,11 @@ class ReactInjectPlugin extends Renderer
      * @param \Magento\Framework\Escaper $escaper
      * @param \Magento\Framework\Stdlib\StringUtils $string
      * @param \Psr\Log\LoggerInterface $logger
-     * @param MsApplicationTileImage|null $msApplicationTileImage
      * @param ScopeConfigInterface $config
      * @param State $state
      * @param StoreManagerInterface $store
      * @param Template $template
+     * @param MsApplicationTileImage|null $msApplicationTileImage
      */
     public function __construct(
         Config $pageConfig,
@@ -61,11 +61,11 @@ public function __construct(
         \Magento\Framework\Escaper $escaper,
         \Magento\Framework\Stdlib\StringUtils $string,
         \Psr\Log\LoggerInterface $logger,
-        MsApplicationTileImage $msApplicationTileImage = null,
         private ScopeConfigInterface $config,
         private State $state,
         private StoreManagerInterface $store,
-        private Template $template
+        private Template $template,
+        ?MsApplicationTileImage $msApplicationTileImage = null
     ) {
         parent::__construct($pageConfig, $assetMergeService, $urlBuilder, $escaper, $string, $logger, $msApplicationTileImage);
         $this->configuration = $this->getConfigurationSettings();

etc/adminhtml/system.xml

@@ -65,6 +65,14 @@
 					<config_path>react_vue_config/css/defer_css</config_path>
 				</field>
 			</group>
+			<group id="product" sortOrder="20" showInWebsite="1" showInStore="1" showInDefault="1" translate="label">
+				<label>Product configuration</label>
+				<field id="base64_image" type="select"  sortOrder="10" showInWebsite="1" showInStore="1" showInDefault="1" translate="label">
+					<label>Enable Base64 Image Encoding</label>
+					<source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
+					<comment>Convert mobile product images to base64 format. Can improve LCP by 0.1-0.2s but increases HTML size.</comment>
+				</field>
+			</group>
 		</section>
 	</system>
 </config>

etc/config.xml

@@ -20,6 +20,9 @@
 				<critical>1</critical>
 				<defer_css>1</defer_css>
 			</css>
+			<product>
+            	<base64_image>1</base64_image>
+			</product>
 		</react_vue_config>
 	</default>
 </config>

etc/di.xml

@@ -4,7 +4,6 @@
     <preference for="Magento\Framework\View\Page\Config\Renderer" type="React\React\ReactInjectPlugin"/>
     <preference for="Magento\Swatches\Block\Product\Renderer\Configurable" type="React\React\Block\Product\Renderer\Configurable"/>
     <preference for="Magento\Catalog\Block\Product\ImageFactory" type="React\React\Block\Product\ImageFactory"/>
-
     <preference for="Magento\Checkout\CustomerData\Cart" type="React\React\CustomerData\Cart" />
 
     <type name="Magento\Framework\App\Response\HttpInterface">

tests/Pest.php

@@ -2,6 +2,9 @@
 
 use Pest\TestSuite;
 
+// Load shared mock classes
+require_once __DIR__ . '/Unit/Mocks.php';
+
 /*
 |--------------------------------------------------------------------------
 | Test Case