Lazy-loading polyfills

GreenGremlin · Oct 11, 2017 · 0f82e5e · 0f82e5e
1 parent 00ed100
commit 0f82e5e
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 3 deletions.
diff --git a/packages/react-scripts/config/polyfills.js → ...ges/react-scripts/config/polyfills.all.js b/packages/react-scripts/config/polyfills.js → ...ges/react-scripts/config/polyfills.all.js
@@ -22,3 +22,5 @@ require('whatwg-fetch');
 // Object.assign() is commonly used with React.
 // It will use the native implementation if it's present and isn't buggy.
 Object.assign = require('object-assign');
+
+require('./polyfills.partial');
diff --git a/packages/react-scripts/config/polyfills.partial.js b/packages/react-scripts/config/polyfills.partial.js
@@ -0,0 +1,18 @@
+// @remove-on-eject-begin
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+// @remove-on-eject-end
+'use strict';
+
+// React depends on collection types Map and Set starting in version 16.
+// We will include these dependencies explicitly until specified versions of
+// browsers may be targeted.
+require('core-js/es6/map');
+require('core-js/es6/set');
+
+// React also depends on requestAnimationFrame in version 16 and newer.
+require('raf/polyfill');
diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js
@@ -64,7 +64,11 @@ module.exports = {
   // You can exclude the *.map files from the build during deployment.
   devtool: shouldUseSourceMap ? 'source-map' : false,
   // In production, we only want to load the polyfills and the app code.
-  entry: [require.resolve('./polyfills'), paths.appIndexJs],
+  entry: {
+      'polyfills.all': require.resolve('./polyfills.all'),
+      'polyfills.partial': require.resolve('./polyfills.partial'),
+      index: paths.appIndexJs,
+  },
   output: {
     // The build folder.
     path: paths.appBuild,
@@ -271,6 +275,7 @@ module.exports = {
     new HtmlWebpackPlugin({
       inject: true,
       template: paths.appHtml,
+      excludeChunks: ['polyfills.all', 'polyfills.partial'],
       minify: {
         removeComments: true,
         collapseWhitespace: true,

diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json
@@ -30,6 +30,7 @@
     "babel-runtime": "6.26.0",
     "case-sensitive-paths-webpack-plugin": "2.1.1",
     "chalk": "1.1.3",
+    "core-js": "2.5.1",
     "css-loader": "0.28.4",
     "dotenv": "4.0.0",
     "eslint": "4.4.1",
@@ -48,6 +49,7 @@
     "postcss-flexbugs-fixes": "3.2.0",
     "postcss-loader": "2.0.6",
     "promise": "8.0.1",
+    "raf": "3.3.2",
     "react-dev-utils": "^4.1.0",
     "style-loader": "0.19.0",
     "sw-precache-webpack-plugin": "0.11.4",
@@ -58,8 +60,8 @@
     "whatwg-fetch": "2.0.3"
   },
   "devDependencies": {
-    "react": "^15.5.4",
-    "react-dom": "^15.5.4"
+    "react": "^16.0.0",
+    "react-dom": "^16.0.0"
   },
   "optionalDependencies": {
     "fsevents": "1.1.2"

diff --git a/packages/react-scripts/template/public/index.html b/packages/react-scripts/template/public/index.html
@@ -20,6 +20,28 @@
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
     <title>React App</title>
+    <script>
+        var modernBrowser = (
+            'Map' in window &&
+            'Set' in window
+        )
+        var oldBrowser = !(
+            'fetch' in window &&
+            'assign' in Object
+        )
+        var polyfillSrc;
+        if (oldBrowser) {
+            polyfillSrc = 'polyfills.all.bundle.js';
+        } else if (!modernBrowser) {
+            polyfillSrc = 'polyfills.partial.bundle.js';
+        }
+        if (polyfillSrc) {
+            var scriptElement = document.createElement('script');
+            scriptElement.async = false;
+            scriptElement.src = polyfillSrc;
+            document.head.appendChild(scriptElement);
+        }
+    </script>
   </head>
   <body>
     <noscript>