added defer attribute to scripts

Author: shrynx

packages/react-scripts/config/webpack.config.prod.js

@@ -16,6 +16,7 @@ const fs = require('fs');
 const webpack = require('webpack');
 const NameAllModulesPlugin = require('name-all-modules-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
+const ScriptExtHtmlWebpackPlugin = require('script-ext-html-webpack-plugin');
 const ExtractTextPlugin = require('extract-text-webpack-plugin');
 const ManifestPlugin = require('webpack-manifest-plugin');
 const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
@@ -322,6 +323,11 @@ module.exports = {
         minifyURLs: true,
       },
     }),
+    // This ensures that the browser will load the scripts in parallel,
+    // but execute them in the order they appear in the document.
+    new ScriptExtHtmlWebpackPlugin({
+      defaultAttribute: 'defer',
+    }),
     // Makes some environment variables available to the JS code, for example:
     // if (process.env.NODE_ENV === 'production') { ... }. See `./env.js`.
     // It is absolutely essential that NODE_ENV was set to production here.

packages/react-scripts/package.json

@@ -53,6 +53,7 @@
     "promise": "7.1.1",
     "react-dev-utils": "^1.0.3",
     "react-error-overlay": "^1.0.3",
+    "script-ext-html-webpack-plugin": "^1.8.0",
     "style-loader": "0.17.0",
     "sw-precache-webpack-plugin": "0.9.1",
     "url-loader": "0.5.8",