ENGCOM-7299: Load storage polyfill conditionally #27619

magento-engcom-team · magento-engcom-team · commit c9e6b1307f70 · 2020-05-27T18:24:44.000-05:00
- Merge Pull Request #27619 from krzksz/magento2:performance-storage-polyfill - Merged commits: 1. cba9d46 2. f81f12e 3. e1a98e2 4. f58a127 5. e8b245e 6. fbbd5ae
diff --git a/app/code/Magento/Theme/view/base/requirejs-config.js b/app/code/Magento/Theme/view/base/requirejs-config.js
@@ -4,16 +4,16 @@
  */
 
 var config = {
-    'waitSeconds': 0,
-    'map': {
+    waitSeconds: 0,
+    map: {
         '*': {
             'ko': 'knockoutjs/knockout',
             'knockout': 'knockoutjs/knockout',
             'mageUtils': 'mage/utils/main',
             'rjsResolver': 'mage/requirejs/resolver'
         }
     },
-    'shim': {
+    shim: {
         'jquery/jquery-migrate': ['jquery'],
         'jquery/jstree/jquery.hotkeys': ['jquery'],
         'jquery/hover-intent': ['jquery'],
@@ -28,7 +28,7 @@ var config = {
         },
         'magnifier/magnifier': ['jquery']
     },
-    'paths': {
+    paths: {
         'jquery/validate': 'jquery/jquery.validate',
         'jquery/hover-intent': 'jquery/jquery.hoverIntent',
         'jquery/file-uploader': 'jquery/fileUploader/jquery.fileupload-fp',
@@ -40,26 +40,47 @@ var config = {
         'tinycolor': 'jquery/spectrum/tinycolor',
         'jquery-ui-modules': 'jquery/ui-modules'
     },
-    'deps': [
+    deps: [
         'jquery/jquery-migrate'
     ],
-    'config': {
-        'mixins': {
+    config: {
+        mixins: {
             'jquery/jstree/jquery.jstree': {
                 'mage/backend/jstree-mixin': true
             },
             'jquery': {
                 'jquery/patches/jquery': true
             }
         },
-        'text': {
+        text: {
             'headers': {
                 'X-Requested-With': 'XMLHttpRequest'
             }
         }
     }
 };
 
+/* eslint-disable max-depth */
+/**
+ * Adds polyfills only for browser contexts which prevents bundlers from including them.
+ */
+if (typeof window !== 'undefined' && window.document) {
+    /**
+     * Polyfill localStorage and sessionStorage for browsers that do not support them.
+     */
+    try {
+        if (!window.localStorage || !window.sessionStorage) {
+            throw new Error();
+        }
+
+        localStorage.setItem('storage_test', 1);
+        localStorage.removeItem('storage_test');
+    } catch (e) {
+        config.deps.push('mage/polyfill');
+    }
+}
+/* eslint-enable max-depth */
+
 require(['jquery'], function ($) {
     'use strict';
 
diff --git a/app/code/Magento/Theme/view/frontend/layout/default_head_blocks.xml b/app/code/Magento/Theme/view/frontend/layout/default_head_blocks.xml
@@ -10,7 +10,6 @@
         <meta name="viewport" content="width=device-width, initial-scale=1"/>
         <css src="mage/calendar.css"/>
         <script src="requirejs/require.js"/>
-        <script src="mage/polyfill.js"/>
     </head>
     <body>
         <referenceBlock name="head.additional">
diff --git a/lib/web/mage/polyfill.js b/lib/web/mage/polyfill.js
@@ -1,19 +1,21 @@
-try {
-    if (!window.localStorage || !window.sessionStorage) {
-        throw new Error();
-    }
+(function (root, doc) {
+    'use strict';
+
+    var Storage;
 
-    localStorage.setItem('storage_test', 1);
-    localStorage.removeItem('storage_test');
-} catch (e) {
-    (function () {
-        'use strict';
+    try {
+        if (!root.localStorage || !root.sessionStorage) {
+            throw new Error();
+        }
 
+        localStorage.setItem('storage_test', 1);
+        localStorage.removeItem('storage_test');
+    } catch (e) {
         /**
          * Returns a storage object to shim local or sessionStorage
          * @param {String} type - either 'local' or 'session'
          */
-        var Storage = function (type) {
+        Storage = function (type) {
             var data;
 
             /**
@@ -32,7 +34,7 @@ try {
                 } else {
                     expires = '';
                 }
-                document.cookie = name + '=' + value + expires + '; path=/';
+                doc.cookie = name + '=' + value + expires + '; path=/';
             }
 
             /**
@@ -41,7 +43,7 @@ try {
              */
             function readCookie(name) {
                 var nameEQ = name + '=',
-                    ca = document.cookie.split(';'),
+                    ca = doc.cookie.split(';'),
                     i = 0,
                     c;
 
@@ -70,11 +72,11 @@ try {
                     return 'localstorage';
                 }
 
-                if (!window.name) {
-                    window.name = new Date().getTime();
+                if (!root.name) {
+                    root.name = new Date().getTime();
                 }
 
-                return 'sessionStorage' + window.name;
+                return 'sessionStorage' + root.name;
             }
 
             /**
@@ -170,7 +172,7 @@ try {
             };
         };
 
-        window.localStorage.prototype = window.localStorage = new Storage('local');
-        window.sessionStorage.prototype = window.sessionStorage = new Storage('session');
-    })();
-}
+        root.localStorage.prototype = root.localStorage = new Storage('local');
+        root.sessionStorage.prototype = root.sessionStorage = new Storage('session');
+    }
+})(window, document);
