Performance fixes + IndexedDb Replacement

config/default.json

@@ -13,8 +13,12 @@
       "dynamicConfigReload": false,
       "dynamicConfigContinueOnError": false,
       "dynamicConfigExclude": ["ssr", "storeViews", "entities", "localForage", "shipping", "boost", "query"],
-      "dynamicConfigInclude": []
+      "dynamicConfigInclude": [],
+      "elasticCacheQuota": 4096
     },
+    "seo": {
+      "useUrlDispatcher": false
+    },    
     "console": {
       "verbosityLevel": "only-errors"
     },
@@ -34,7 +38,8 @@
       "min_score": 0.02,
       "csrTimeout": 5000,
       "ssrTimeout": 1000,
-      "queryMethod": "POST"
+      "queryMethod": "GET",
+      "disableLocalStorageQueriesCache": true
     },
     "ssr": {
       "templates": {
@@ -217,14 +222,14 @@
         "cmsblock": "INDEXEDDB",
         "carts": "LOCALSTORAGE",
         "orders": "LOCALSTORAGE",
-        "wishlist": "INDEXEDDB",
+        "wishlist": "LOCALSTORAGE",
         "categories": "INDEXEDDB",
         "attributes": "LOCALSTORAGE",
         "products": "INDEXEDDB",
-        "elasticCache": "INDEXEDDB",
+        "elasticCache": "LOCALSTORAGE",
         "claims": "LOCALSTORAGE",
         "syncTasks": "LOCALSTORAGE",
-        "ordersHistory": "INDEXEDDB",
+        "ordersHistory": "LOCALSTORAGE",
         "checkoutFieldValues": "LOCALSTORAGE"
       }
     },

core/app.ts

@@ -106,7 +106,7 @@ function createApp (ssrContext, config): { app: Vue, router: VueRouter, store: S
   // store.state.shipping.methods = shippingMethods
 
   Vue.use(Vuelidate)
-  Vue.use(VueLazyload, {attempt: 2})
+  Vue.use(VueLazyload, {attempt: 2, preLoad: 1.5})
   Vue.use(Meta)
   Vue.use(VueObserveVisibility)
 

core/i18n/scripts/translation.preprocessor.js

@@ -35,8 +35,10 @@ module.exports = function (csvDirectories, config = null) {
   })
 
   languages.forEach((language) => {
-    console.debug(`Writing JSON file: ${language}.json`)
-    fs.writeFileSync(path.join(__dirname, '../resource/i18n', `${language}.json`), JSON.stringify(messages[language]))
+    if (!config || !config.i18n.bundleAllStoreviewLanguages || (config.i18n.bundleAllStoreviewLanguages && language === 'en-US')) {
+      console.debug(`Writing JSON file: ${language}.json`)
+      fs.writeFileSync(path.join(__dirname, '../resource/i18n', `${language}.json`), JSON.stringify(messages[language]))
+    }
   })
 
   if (config && config.i18n.bundleAllStoreviewLanguages) {

core/modules/catalog/components/ProductAttribute.ts

@@ -24,7 +24,7 @@ export const ProductAttribute = {
       if (!parsedValues) {
         return this.emptyPlaceholder
       } else {
-        parsedValues = parsedValues.split(',')
+        parsedValues = typeof parsedValues === 'string' ? parsedValues.split(',') : parsedValues
         let results = []
         for (let parsedVal of parsedValues) {
           if (this.attribute.options) {

core/store/index.ts

@@ -165,7 +165,7 @@ export function initStore () {
       name: dbNamePrefix + 'shop',
       storeName: 'elasticCache',
       driver: localForage[config.localForage.defaultDrivers['elasticCache']]
-    })),
+    }), true, rootStore.state.config.server.elasticCacheQuota),
     productsCollection: new UniversalStorage(localForage.createInstance({
       name: dbNamePrefix + 'shop',
       storeName: 'products',

core/store/lib/search.ts

@@ -105,7 +105,7 @@ export function quickSearchByQuery ({ query, start = 0, size = 50, entityType =
       const res = searchAdapter.entities[Request.type].resultPorcessor(resp, start, size)
 
       if (res) { // otherwise it can be just a offline mode
-        cache.setItem(cacheKey, res).catch((err) => { console.error('Cannot store cache for ' + cacheKey + ', ' + err) })
+        cache.setItem(cacheKey, res, null, rootStore.state.config.elasticsearch.disableLocalStorageQueriesCache).catch((err) => { console.error('Cannot store cache for ' + cacheKey + ', ' + err) })
         if (!servedFromCache) { // if navigator onLine == false means ES is unreachable and probably this will return false; sometimes returned false faster than indexedDb cache returns result ...
           console.debug('Result from ES for ' + cacheKey + ' (' + entityType + '),  ms=' + (new Date().getTime() - benchmarkTime.getTime()))
           res.cache = false

core/store/lib/storage.ts

@@ -7,6 +7,33 @@ const CACHE_TIMEOUT_ITERATE = 2000
 const DISABLE_PERSISTANCE_AFTER = 1
 const DISABLE_PERSISTANCE_AFTER_SAVE = 30
 
+function roughSizeOfObject( object ) {
+  const objectList = []
+  const stack = [ object ]
+  let bytes = 0
+  while ( stack.length ) {
+    const value = stack.pop()
+    if ( typeof value === 'boolean' ) {
+      bytes += 4
+    }
+    else if ( typeof value === 'string' ) {
+      bytes += value.length * 2
+    }
+    else if ( typeof value === 'number' ) {
+      bytes += 8
+    } else if (
+      typeof value === 'object'
+      && objectList.indexOf( value ) === -1
+    ) {
+      objectList.push( value )
+      for( var i in value ) {
+        stack.push( value[ i ] )
+      }
+    }
+  }
+  return bytes
+}
+
 class LocalForageCacheDriver {
   private _collectionName: string;
   private _dbName: string;
@@ -17,10 +44,40 @@ class LocalForageCacheDriver {
   private _useLocalCacheByDefault: boolean;
   private cacheErrorsCount: any;
   private localCache: any;
+  private _storageQuota: number;
 
-  constructor (collection, useLocalCacheByDefault = true) {
+  constructor (collection, useLocalCacheByDefault = true, storageQuota = 0) {
     const collectionName = collection._config.storeName
     const dbName = collection._config.name
+    this._storageQuota = storageQuota
+
+    if (this._storageQuota && !Vue.prototype.$isServer) {
+      const storageQuota = this._storageQuota      
+      const iterateFnc = this.iterate.bind(this)
+      const removeItemFnc = this.removeItem.bind(this)
+      setInterval(() => {
+        let storageSize = 0
+        this.iterate((item, id, number) => {
+          storageSize += roughSizeOfObject(item)
+        }, (err, result) => {
+          if ((storageSize / 1024) > storageQuota) {
+            Logger.info('Clearing out the storage ', 'cache', { storageSizeKB: Math.round(storageSize / 1024), storageQuotaKB: storageQuota })()
+            const howManyItemsToRemove = 100
+            const keysPurged = []
+            iterateFnc((item, id, number) => {
+              if (number < howManyItemsToRemove) { 
+                removeItemFnc(id)
+                keysPurged.push(id)
+              }
+            }, (err, result) => {
+              Logger.info('Cache purged', 'cache', { keysPurged })()
+            })
+          } else {
+            Logger.info('Storage size', 'cache', { storageSizeKB: Math.round(storageSize / 1024) })()
+          }
+        })
+      }, 30000)
+    }
     if (typeof this.cacheErrorsCount === 'undefined') {
       this.cacheErrorsCount = {}
     }
@@ -105,7 +162,7 @@ class LocalForageCacheDriver {
           if ((endTime - startTime) >= CACHE_TIMEOUT) {
             console.error('Cache promise resolved after [ms]', key, (endTime - startTime))
           }
-          if (!this._localCache[key]) {
+          if (!this._localCache[key] && result) {
             this._localCache[key] = result // populate the local cache for the next call
           }
           if (!isResolved) {
@@ -228,9 +285,15 @@ class LocalForageCacheDriver {
   // Unlike Gaia's implementation, the callback function is passed the value,
   // in case you want to operate on that value only after you're sure it
   // saved, or something like that.
-  setItem (key, value, callback?) {
+  setItem (key, value, callback?, memoryOnly = false) {
     const isCallbackCallable = (typeof callback !== 'undefined' && callback)
     this._localCache[key] = value
+    if (memoryOnly) {
+      return new Promise((resolve, reject) => {
+        if (isCallbackCallable) callback(null, null)
+        resolve(null)
+      })
+    }
     if (!Vue.prototype.$isServer) {
       if (this.cacheErrorsCount[this._collectionName] >= DISABLE_PERSISTANCE_AFTER_SAVE && this._useLocalCacheByDefault) {
         if (!this._persistenceErrorNotified) {

src/themes/default/components/core/ProductGallery.vue

@@ -7,23 +7,19 @@
       :gallery="gallery"
       @close="toggleZoom"/>
     <div v-show="OfflineOnly">
-      <transition name="fade" appear>
-        <img class="offline-image" v-lazy="offline" :src="offline.src" ref="offline" alt="">
-      </transition>
+      <img class="offline-image" v-lazy="offline" :src="offline.src" ref="offline" alt="">
     </div>
     <div v-show="OnlineOnly">
       <div class="relative">
         <div v-if="gallery.length === 1">
-          <transition name="fade" appear>
-            <img
-              :src="defaultImage.src"
-              v-lazy="defaultImage"
-              class="mw-100 pointer"
-              ref="defaultImage"
-              :alt="product.name | htmlDecode"
-              itemprop="image"
-            >
-          </transition>
+          <img
+            :src="defaultImage.src"
+            v-lazy="defaultImage"
+            class="mw-100 pointer"
+            ref="defaultImage"
+            :alt="product.name | htmlDecode"
+            itemprop="image"
+          >
         </div>
         <div v-else>
           <no-ssr>

src/themes/default/components/core/ProductTile.vue

@@ -20,7 +20,7 @@
         :class="[{ sale: labelsActive && isOnSale }, { new: labelsActive && isNew }]">
         <img
           :alt="product.name"
-          :src="thumbnailObj.loading"
+          :src="thumbnailObj.src"
           v-lazy="thumbnailObj"
           height="300"
           width="310"