Use base64 data URL for the main PDP image to improve lighthouse perf… (#106)

* Use base64 data URL for the main PDP image to improve lighthouse performance score.

* bump version

Author: markbrocato

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-storefront",
-  "version": "8.10.0",
+  "version": "8.10.1",
   "description": "Build and deploy e-commerce progressive web apps (PWAs) in record time.",
   "module": "./index.js",
   "license": "Apache-2.0",

src/mock-connector/product.js

@@ -1,6 +1,7 @@
 import fulfillAPIRequest from '..//props/fulfillAPIRequest'
 import createProduct from './utils/createProduct'
 import createAppData from './utils/createAppData'
+import getBase64ForImage from 'react-storefront/utils/getBase64ForImage'
 
 function asciiSum(string = '') {
   return string.split('').reduce((s, e) => s + e.charCodeAt(), 0)
@@ -32,8 +33,6 @@ export default async function product(params, req, res) {
 }
 
 async function getPageData(id) {
-  console.log('getPageData')
-
   const result = {
     title: `Product ${id}`,
     product: createProduct(id),
@@ -50,5 +49,8 @@ async function getPageData(id) {
     ],
   }
 
+  const mainProductImage = result.product.media.full[0]
+  mainProductImage.src = await getBase64ForImage(mainProductImage.src)
+
   return result
 }