From 5932a676d14cd3951b826df25f478ee208f7e5cf Mon Sep 17 00:00:00 2001
From: Ayc0 <benjamin.koltes@gmail.com>
Date: Sun, 17 Sep 2017 20:59:02 +0200
Subject: [PATCH 01/29] Split vendor and app into separate files

---
 packages/react-scripts/config/paths.js            |  1 +
 .../react-scripts/config/webpack.config.prod.js   | 15 ++++++++++-----
 packages/react-scripts/template/src/vendors.js    |  1 +
 3 files changed, 12 insertions(+), 5 deletions(-)
 create mode 100644 packages/react-scripts/template/src/vendors.js

diff --git a/packages/react-scripts/config/paths.js b/packages/react-scripts/config/paths.js
index 718b898bb8d..066fbd42e6b 100644
--- a/packages/react-scripts/config/paths.js
+++ b/packages/react-scripts/config/paths.js
@@ -53,6 +53,7 @@ module.exports = {
   appPublic: resolveApp('public'),
   appHtml: resolveApp('public/index.html'),
   appIndexJs: resolveApp('src/index.js'),
+  appVendors: resolveApp('src/vendors.js'),
   appPackageJson: resolveApp('package.json'),
   appSrc: resolveApp('src'),
   yarnLockFile: resolveApp('yarn.lock'),
diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js
index 3b2a2068db2..fa386c0bbda 100644
--- 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: require.resolve('./polyfills'),
+    app: paths.appIndexJs,
+    vendors: paths.appVendors,
+  },
   output: {
     // The build folder.
     path: paths.appBuild,
@@ -88,7 +92,7 @@ module.exports = {
     // https://github.com/facebookincubator/create-react-app/issues/253
     modules: ['node_modules', paths.appNodeModules].concat(
       // It is guaranteed to exist because we tweak it in `env.js`
-      process.env.NODE_PATH.split(path.delimiter).filter(Boolean)
+      process.env.NODE_PATH.split(path.delimiter).filter(Boolean),
     ),
     // These are the reasonable defaults supported by the Node ecosystem.
     // We also include JSX as a common component filename extension to support
@@ -104,7 +108,7 @@ module.exports = {
       // unfortunate to rely on, as react-scripts could be symlinked,
       // and thus babel-runtime might not be resolvable from the source.
       'babel-runtime': path.dirname(
-        require.resolve('babel-runtime/package.json')
+        require.resolve('babel-runtime/package.json'),
       ),
       // @remove-on-eject-end
       // Support React Native Web
@@ -234,8 +238,8 @@ module.exports = {
                     },
                   ],
                 },
-                extractTextPluginOptions
-              )
+                extractTextPluginOptions,
+              ),
             ),
             // Note: this won't work without `new ExtractTextPlugin()` in `plugins`.
           },
@@ -356,6 +360,7 @@ module.exports = {
     // https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
     // You can remove this if you don't use Moment.js:
     new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
+    new webpack.optimize.CommonsChunkPlugin(/* chunkName= */ 'vendors'),
   ],
   // Some libraries import Node modules but don't use them in the browser.
   // Tell Webpack to provide empty mocks for them so importing them works.
diff --git a/packages/react-scripts/template/src/vendors.js b/packages/react-scripts/template/src/vendors.js
new file mode 100644
index 00000000000..6552aa74739
--- /dev/null
+++ b/packages/react-scripts/template/src/vendors.js
@@ -0,0 +1 @@
+module.exports = ['react', 'react-dom'];

From cbfd216d0ab8f59e9890d2d2b20b83fb09837a3a Mon Sep 17 00:00:00 2001
From: Ayc0 <benjamin.koltes@gmail.com>
Date: Sun, 17 Sep 2017 22:31:30 +0200
Subject: [PATCH 02/29] Entries in array and not in object

---
 packages/react-scripts/config/webpack.config.prod.js | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js
index fa386c0bbda..e410ca8352c 100644
--- a/packages/react-scripts/config/webpack.config.prod.js
+++ b/packages/react-scripts/config/webpack.config.prod.js
@@ -64,11 +64,7 @@ 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: {
-    polyfills: require.resolve('./polyfills'),
-    app: paths.appIndexJs,
-    vendors: paths.appVendors,
-  },
+  entry: [require.resolve('./polyfills'), paths.appIndexJs, paths.appVendors],
   output: {
     // The build folder.
     path: paths.appBuild,

From cfb54cf2d8eea46ecf74e481685f8b62132051fb Mon Sep 17 00:00:00 2001
From: Ayc0 <benjamin.koltes@gmail.com>
Date: Sun, 17 Sep 2017 22:38:45 +0200
Subject: [PATCH 03/29] remove trailing commas

---
 packages/react-scripts/config/webpack.config.prod.js | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js
index e410ca8352c..911de23ac84 100644
--- a/packages/react-scripts/config/webpack.config.prod.js
+++ b/packages/react-scripts/config/webpack.config.prod.js
@@ -51,7 +51,7 @@ const cssFilename = 'static/css/[name].[contenthash:8].css';
 // To have this structure working with relative paths, we have to use custom options.
 const extractTextPluginOptions = shouldUseRelativeAssetPaths
   ? // Making sure that the publicPath goes back to to build folder.
-    { publicPath: Array(cssFilename.split('/').length).join('../') }
+  { publicPath: Array(cssFilename.split('/').length).join('../') }
   : {};
 
 // This is the production configuration.
@@ -88,7 +88,7 @@ module.exports = {
     // https://github.com/facebookincubator/create-react-app/issues/253
     modules: ['node_modules', paths.appNodeModules].concat(
       // It is guaranteed to exist because we tweak it in `env.js`
-      process.env.NODE_PATH.split(path.delimiter).filter(Boolean),
+      process.env.NODE_PATH.split(path.delimiter).filter(Boolean)
     ),
     // These are the reasonable defaults supported by the Node ecosystem.
     // We also include JSX as a common component filename extension to support
@@ -104,7 +104,7 @@ module.exports = {
       // unfortunate to rely on, as react-scripts could be symlinked,
       // and thus babel-runtime might not be resolvable from the source.
       'babel-runtime': path.dirname(
-        require.resolve('babel-runtime/package.json'),
+        require.resolve('babel-runtime/package.json')
       ),
       // @remove-on-eject-end
       // Support React Native Web
@@ -234,8 +234,8 @@ module.exports = {
                     },
                   ],
                 },
-                extractTextPluginOptions,
-              ),
+                extractTextPluginOptions
+              )
             ),
             // Note: this won't work without `new ExtractTextPlugin()` in `plugins`.
           },

From 85b0ae08267c77ac055480930143351e476b164c Mon Sep 17 00:00:00 2001
From: Ayc0 <benjamin.koltes@gmail.com>
Date: Sun, 17 Sep 2017 23:12:45 +0200
Subject: [PATCH 04/29] Add appVendors in every paths object in paths.js

---
 packages/react-scripts/config/paths.js               | 2 ++
 packages/react-scripts/config/webpack.config.prod.js | 2 +-
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/react-scripts/config/paths.js b/packages/react-scripts/config/paths.js
index 066fbd42e6b..63ea4580c7c 100644
--- a/packages/react-scripts/config/paths.js
+++ b/packages/react-scripts/config/paths.js
@@ -74,6 +74,7 @@ module.exports = {
   appPublic: resolveApp('public'),
   appHtml: resolveApp('public/index.html'),
   appIndexJs: resolveApp('src/index.js'),
+  appVendors: resolveApp('src/vendors.js'),
   appPackageJson: resolveApp('package.json'),
   appSrc: resolveApp('src'),
   yarnLockFile: resolveApp('yarn.lock'),
@@ -104,6 +105,7 @@ if (
     appPublic: resolveOwn('template/public'),
     appHtml: resolveOwn('template/public/index.html'),
     appIndexJs: resolveOwn('template/src/index.js'),
+    appVendors: resolveOwn('template/src/vendors.js'),
     appPackageJson: resolveOwn('package.json'),
     appSrc: resolveOwn('template/src'),
     yarnLockFile: resolveOwn('template/yarn.lock'),
diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js
index 911de23ac84..0087ea1c040 100644
--- a/packages/react-scripts/config/webpack.config.prod.js
+++ b/packages/react-scripts/config/webpack.config.prod.js
@@ -51,7 +51,7 @@ const cssFilename = 'static/css/[name].[contenthash:8].css';
 // To have this structure working with relative paths, we have to use custom options.
 const extractTextPluginOptions = shouldUseRelativeAssetPaths
   ? // Making sure that the publicPath goes back to to build folder.
-  { publicPath: Array(cssFilename.split('/').length).join('../') }
+    { publicPath: Array(cssFilename.split('/').length).join('../') }
   : {};
 
 // This is the production configuration.

From 7690dfa1e937c1fb0d20ba4eacbba549236ef4ba Mon Sep 17 00:00:00 2001
From: Ayc0 <benjamin.koltes@gmail.com>
Date: Sun, 17 Sep 2017 23:33:18 +0200
Subject: [PATCH 05/29] Add vendors.js in the kitchensink folder

---
 packages/react-scripts/fixtures/kitchensink/src/vendors.js | 1 +
 1 file changed, 1 insertion(+)
 create mode 100644 packages/react-scripts/fixtures/kitchensink/src/vendors.js

diff --git a/packages/react-scripts/fixtures/kitchensink/src/vendors.js b/packages/react-scripts/fixtures/kitchensink/src/vendors.js
new file mode 100644
index 00000000000..6552aa74739
--- /dev/null
+++ b/packages/react-scripts/fixtures/kitchensink/src/vendors.js
@@ -0,0 +1 @@
+module.exports = ['react', 'react-dom'];

From 51206b7452244773c8801de4d1977eef55210370 Mon Sep 17 00:00:00 2001
From: Ayc0 <benjamin.koltes@gmail.com>
Date: Mon, 18 Sep 2017 02:11:32 +0200
Subject: [PATCH 06/29] Refactor how vendors are imported in webpack

---
 .../config/webpack.config.prod.js              | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js
index 0087ea1c040..857372d0e03 100644
--- a/packages/react-scripts/config/webpack.config.prod.js
+++ b/packages/react-scripts/config/webpack.config.prod.js
@@ -64,7 +64,13 @@ 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, paths.appVendors],
+  entry: {
+    app: paths.appIndexJs,
+    // Load the app and all its dependencies
+    vendors: require(paths.appVendors),
+    // List of all the node modules that should be excluded from the app
+    polyfills: require.resolve('./polyfills'),
+  },
   output: {
     // The build folder.
     path: paths.appBuild,
@@ -356,7 +362,15 @@ module.exports = {
     // https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
     // You can remove this if you don't use Moment.js:
     new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
-    new webpack.optimize.CommonsChunkPlugin(/* chunkName= */ 'vendors'),
+    // For some reason, Webpack adds these ids of all the modules that exist to our vendor chunk
+    // Instead of using numerical ids it uses a unique path to map our request to a module.
+    // Thanks to this change the vendor hash will now always stay the same
+    new webpack.NamedModulesPlugin(),
+    // Avoid having the vendors in the rest of the app
+    new webpack.optimize.CommonsChunkPlugin({
+      name: 'vendors',
+      minChunks: Infinity,
+    }),
   ],
   // Some libraries import Node modules but don't use them in the browser.
   // Tell Webpack to provide empty mocks for them so importing them works.

From 005369c24e705ade66834736766b4b4e3a105a48 Mon Sep 17 00:00:00 2001
From: Ayc0 <benjamin.koltes@gmail.com>
Date: Mon, 18 Sep 2017 02:15:19 +0200
Subject: [PATCH 07/29] Add CommonsChunkPlugin for runtime

---
 packages/react-scripts/config/webpack.config.prod.js | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js
index 857372d0e03..2f824dd074c 100644
--- a/packages/react-scripts/config/webpack.config.prod.js
+++ b/packages/react-scripts/config/webpack.config.prod.js
@@ -371,6 +371,11 @@ module.exports = {
       name: 'vendors',
       minChunks: Infinity,
     }),
+    // The runtime is the part of Webpack that resolves modules
+    // at runtime and handles async loading and more
+    new webpack.optimize.CommonsChunkPlugin({
+      name: 'runtime',
+    }),
   ],
   // Some libraries import Node modules but don't use them in the browser.
   // Tell Webpack to provide empty mocks for them so importing them works.

From ff447f896430ae66a8bc06305a242b84690b7172 Mon Sep 17 00:00:00 2001
From: Ayc0 <benjamin.koltes@gmail.com>
Date: Mon, 18 Sep 2017 03:14:57 +0200
Subject: [PATCH 08/29] Rename app to main

---
 packages/react-scripts/config/webpack.config.prod.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js
index 2f824dd074c..084a5a86aef 100644
--- a/packages/react-scripts/config/webpack.config.prod.js
+++ b/packages/react-scripts/config/webpack.config.prod.js
@@ -65,7 +65,7 @@ module.exports = {
   devtool: shouldUseSourceMap ? 'source-map' : false,
   // In production, we only want to load the polyfills and the app code.
   entry: {
-    app: paths.appIndexJs,
+    main: paths.appIndexJs,
     // Load the app and all its dependencies
     vendors: require(paths.appVendors),
     // List of all the node modules that should be excluded from the app

From 1517fbea57d66b43fee8aace4ebe74ec1a48aad9 Mon Sep 17 00:00:00 2001
From: Ayc0 <benjamin.koltes@gmail.com>
Date: Mon, 18 Sep 2017 09:26:48 +0200
Subject: [PATCH 09/29] Name every chunks and if a chunk doesn't have any name,
 use the name of the file

---
 .../config/webpack.config.prod.js             | 28 ++++++++++++++++---
 1 file changed, 24 insertions(+), 4 deletions(-)

diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js
index 084a5a86aef..709ae544f8e 100644
--- a/packages/react-scripts/config/webpack.config.prod.js
+++ b/packages/react-scripts/config/webpack.config.prod.js
@@ -18,6 +18,7 @@ const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
 const SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin');
 const eslintFormatter = require('react-dev-utils/eslintFormatter');
 const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
+const fs = require('fs');
 const paths = require('./paths');
 const getClientEnvironment = require('./env');
 
@@ -65,11 +66,14 @@ module.exports = {
   devtool: shouldUseSourceMap ? 'source-map' : false,
   // In production, we only want to load the polyfills and the app code.
   entry: {
-    main: paths.appIndexJs,
     // Load the app and all its dependencies
-    vendors: require(paths.appVendors),
-    // List of all the node modules that should be excluded from the app
+    main: paths.appIndexJs,
+    // Add the polyfills
     polyfills: require.resolve('./polyfills'),
+    // List of all the node modules that should be excluded from the app
+    vendors: fs.existsSync(paths.appVendors)
+      ? require(paths.appVendors)
+      : ['react', 'react-dom'],
   },
   output: {
     // The build folder.
@@ -362,10 +366,26 @@ module.exports = {
     // https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
     // You can remove this if you don't use Moment.js:
     new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
-    // For some reason, Webpack adds these ids of all the modules that exist to our vendor chunk
+
+    // For some reason, Webpack adds some ids of all the modules that exist to our vendor chunk
     // Instead of using numerical ids it uses a unique path to map our request to a module.
     // Thanks to this change the vendor hash will now always stay the same
     new webpack.NamedModulesPlugin(),
+
+    // Ensure that every chunks have an actual name and not an id
+    // If the chunk has a name, this name is used
+    // otherwise the name of the file is used
+    new webpack.NamedChunksPlugin(chunk => {
+      if (chunk.name) {
+        return chunk.name;
+      }
+      return chunk.modules
+        .map(m => m.request)
+        .map(filename => filename.replace(/.*\//g, ''))
+        .map(filename => filename.replace(path.extname(filename), ''))
+        .join('_');
+    }),
+
     // Avoid having the vendors in the rest of the app
     new webpack.optimize.CommonsChunkPlugin({
       name: 'vendors',

From 72f35dbf9de784396dc272ee5d59075dd678bc63 Mon Sep 17 00:00:00 2001
From: Ayc0 <benjamin.koltes@gmail.com>
Date: Mon, 18 Sep 2017 14:51:02 +0200
Subject: [PATCH 10/29] Handle deprecated chunk.modules

---
 packages/react-scripts/config/webpack.config.prod.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js
index 709ae544f8e..abef8c193b6 100644
--- a/packages/react-scripts/config/webpack.config.prod.js
+++ b/packages/react-scripts/config/webpack.config.prod.js
@@ -379,8 +379,10 @@ module.exports = {
       if (chunk.name) {
         return chunk.name;
       }
-      return chunk.modules
-        .map(m => m.request)
+      return (chunk.mapModules
+        ? chunk.mapModules(m => m.request)
+        : chunk.modules.map(m => m.request)
+      )
         .map(filename => filename.replace(/.*\//g, ''))
         .map(filename => filename.replace(path.extname(filename), ''))
         .join('_');

From 7d7ff1904cd35f1540f820438041b0cd27c46e9a Mon Sep 17 00:00:00 2001
From: Ayc0 <benjamin.koltes@gmail.com>
Date: Mon, 18 Sep 2017 10:55:12 -0400
Subject: [PATCH 11/29] Use only chunk.mapModules from webpack 3 and use
 path.basename instead of regex

---
 packages/react-scripts/config/webpack.config.prod.js | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js
index abef8c193b6..dbd007109cb 100644
--- a/packages/react-scripts/config/webpack.config.prod.js
+++ b/packages/react-scripts/config/webpack.config.prod.js
@@ -379,12 +379,9 @@ module.exports = {
       if (chunk.name) {
         return chunk.name;
       }
-      return (chunk.mapModules
-        ? chunk.mapModules(m => m.request)
-        : chunk.modules.map(m => m.request)
-      )
-        .map(filename => filename.replace(/.*\//g, ''))
-        .map(filename => filename.replace(path.extname(filename), ''))
+      return chunk
+        .mapModules(m => m.request)
+        .map(filename => path.basename(filename, path.extname(filename)))
         .join('_');
     }),
 

From f8e4682d7cfdf13eb845f6d70e61cfb2ac99072a Mon Sep 17 00:00:00 2001
From: Ayc0 <benjamin.koltes@gmail.com>
Date: Tue, 19 Sep 2017 05:07:49 +0200
Subject: [PATCH 12/29] Add Name All Modules Plugin

---
 packages/react-scripts/config/webpack.config.prod.js | 6 ++++++
 packages/react-scripts/package.json                  | 1 +
 2 files changed, 7 insertions(+)

diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js
index dbd007109cb..bd847d3df4d 100644
--- a/packages/react-scripts/config/webpack.config.prod.js
+++ b/packages/react-scripts/config/webpack.config.prod.js
@@ -18,6 +18,8 @@ const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
 const SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin');
 const eslintFormatter = require('react-dev-utils/eslintFormatter');
 const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
+const NameAllModulesPlugin = require('name-all-modules-plugin');
+
 const fs = require('fs');
 const paths = require('./paths');
 const getClientEnvironment = require('./env');
@@ -395,6 +397,10 @@ module.exports = {
     new webpack.optimize.CommonsChunkPlugin({
       name: 'runtime',
     }),
+
+    // https://medium.com/webpack/predictable-long-term-caching-with-webpack-d3eee1d3fa31
+    // Name the modules that were not named by the previous plugins
+    new NameAllModulesPlugin(),
   ],
   // Some libraries import Node modules but don't use them in the browser.
   // Tell Webpack to provide empty mocks for them so importing them works.
diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json
index 91d4a584cf4..853256da7ab 100644
--- a/packages/react-scripts/package.json
+++ b/packages/react-scripts/package.json
@@ -45,6 +45,7 @@
     "fs-extra": "3.0.1",
     "html-webpack-plugin": "2.29.0",
     "jest": "20.0.4",
+    "name-all-modules-plugin": "^1.0.1",
     "object-assign": "4.1.1",
     "postcss-flexbugs-fixes": "3.2.0",
     "postcss-loader": "2.0.8",

From 9e648d46dc02e7e2ad08b65c8bb57b3b14d0b749 Mon Sep 17 00:00:00 2001
From: Ayc0 <benjamin.koltes@gmail.com>
Date: Tue, 19 Sep 2017 05:14:58 +0200
Subject: [PATCH 13/29] Only add the vendors if the file "src/vendors.js"
 exists

---
 .../config/webpack.config.prod.js             | 25 +++++++++++--------
 1 file changed, 14 insertions(+), 11 deletions(-)

diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js
index bd847d3df4d..ee47ef510af 100644
--- a/packages/react-scripts/config/webpack.config.prod.js
+++ b/packages/react-scripts/config/webpack.config.prod.js
@@ -66,17 +66,20 @@ module.exports = {
   // We generate sourcemaps in production. This is slow but gives good results.
   // 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: {
-    // Load the app and all its dependencies
-    main: paths.appIndexJs,
-    // Add the polyfills
-    polyfills: require.resolve('./polyfills'),
-    // List of all the node modules that should be excluded from the app
-    vendors: fs.existsSync(paths.appVendors)
-      ? require(paths.appVendors)
-      : ['react', 'react-dom'],
-  },
+  // In production, we only want to load the polyfills, the app code and the vendors.
+  entry: Object.assign(
+    {
+      // Load the app and all its dependencies
+      main: paths.appIndexJs,
+      // Add the polyfills
+      polyfills: require.resolve('./polyfills'),
+    },
+    // Only add the vendors if the file "src/vendors.js" exists
+    fs.existsSync(paths.appVendors)
+      ? // List of all the node modules that should be excluded from the app
+        { vendors: require(paths.appVendors) }
+      : {}
+  ),
   output: {
     // The build folder.
     path: paths.appBuild,

From 00f160c11308dd52a49233020e0fbdb798688d22 Mon Sep 17 00:00:00 2001
From: Ayc0 <benjamin.koltes@gmail.com>
Date: Tue, 19 Sep 2017 06:07:36 +0200
Subject: [PATCH 14/29] Ensure that major entries are loaded before the rest

---
 packages/react-scripts/config/sortChunks.js   | 45 +++++++++++++++++++
 .../config/webpack.config.prod.js             |  6 +++
 2 files changed, 51 insertions(+)
 create mode 100644 packages/react-scripts/config/sortChunks.js

diff --git a/packages/react-scripts/config/sortChunks.js b/packages/react-scripts/config/sortChunks.js
new file mode 100644
index 00000000000..0c40fc3046e
--- /dev/null
+++ b/packages/react-scripts/config/sortChunks.js
@@ -0,0 +1,45 @@
+// @remove-on-eject-begin
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ */
+// @remove-on-eject-end
+'use strict';
+
+module.exports = chunks => (left, right) => {
+  var leftIndex = chunks.indexOf(left.names[0]);
+  var rightindex = chunks.indexOf(right.names[0]);
+
+  // If the right entry isn't in the chunks array
+  // ie an element of the array which is being sorted
+  // isn't in the array given in params
+  if (rightindex < 0) {
+    // keep the order of the left element and of the right element
+    // because if the element isn't in the array chunks,
+    // it should be at the end of the array
+    return -1;
+  }
+
+  // If the left entry isn't in the chunks array
+  // ie an element of the array which is being sorted
+  // isn't in the array given in params
+  if (leftIndex < 0) {
+    // invert the order of the left element and of the right element
+    // because if the element isn't in the array chunks,
+    // it should be at the end of the array
+    return 1;
+  }
+
+  // Invert the order if the left element is
+  // after the right element in the array chunks
+  if (leftIndex > rightindex) {
+    return 1;
+  }
+
+  // Keep the order
+  return -1;
+};
diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js
index ee47ef510af..b978a777e45 100644
--- a/packages/react-scripts/config/webpack.config.prod.js
+++ b/packages/react-scripts/config/webpack.config.prod.js
@@ -23,6 +23,7 @@ const NameAllModulesPlugin = require('name-all-modules-plugin');
 const fs = require('fs');
 const paths = require('./paths');
 const getClientEnvironment = require('./env');
+const sortChunks = require('./sortChunks');
 
 // Webpack uses `publicPath` to determine where the app is being served from.
 // It requires a trailing slash, or the file assets will get an incorrect path.
@@ -286,6 +287,11 @@ module.exports = {
     new HtmlWebpackPlugin({
       inject: true,
       template: paths.appHtml,
+      // Need to ensure that the runtime is loaded first because
+      // it loads the rest, then the vendors
+      // And then the polyfills before the main
+      // The others chunks will be loaded after
+      chunksSortMode: sortChunks(['runtime', 'vendors', 'polyfills', 'main']),
       minify: {
         removeComments: true,
         collapseWhitespace: true,

From 186f289e5be000d27a2a618a75e32d238ad80dc8 Mon Sep 17 00:00:00 2001
From: Ayc0 <benjamin.koltes@gmail.com>
Date: Thu, 21 Sep 2017 10:52:02 -0400
Subject: [PATCH 15/29] evert "Ensure that major entries are loaded before the
 rest"

This reverts commit 64887f9f5d251256f6a381c3ec3ba992e148f976.
---
 packages/react-scripts/config/sortChunks.js   | 45 -------------------
 .../config/webpack.config.prod.js             |  6 ---
 2 files changed, 51 deletions(-)
 delete mode 100644 packages/react-scripts/config/sortChunks.js

diff --git a/packages/react-scripts/config/sortChunks.js b/packages/react-scripts/config/sortChunks.js
deleted file mode 100644
index 0c40fc3046e..00000000000
--- a/packages/react-scripts/config/sortChunks.js
+++ /dev/null
@@ -1,45 +0,0 @@
-// @remove-on-eject-begin
-/**
- * Copyright (c) 2015-present, Facebook, Inc.
- * All rights reserved.
- *
- * This source code is licensed under the BSD-style license found in the
- * LICENSE file in the root directory of this source tree. An additional grant
- * of patent rights can be found in the PATENTS file in the same directory.
- */
-// @remove-on-eject-end
-'use strict';
-
-module.exports = chunks => (left, right) => {
-  var leftIndex = chunks.indexOf(left.names[0]);
-  var rightindex = chunks.indexOf(right.names[0]);
-
-  // If the right entry isn't in the chunks array
-  // ie an element of the array which is being sorted
-  // isn't in the array given in params
-  if (rightindex < 0) {
-    // keep the order of the left element and of the right element
-    // because if the element isn't in the array chunks,
-    // it should be at the end of the array
-    return -1;
-  }
-
-  // If the left entry isn't in the chunks array
-  // ie an element of the array which is being sorted
-  // isn't in the array given in params
-  if (leftIndex < 0) {
-    // invert the order of the left element and of the right element
-    // because if the element isn't in the array chunks,
-    // it should be at the end of the array
-    return 1;
-  }
-
-  // Invert the order if the left element is
-  // after the right element in the array chunks
-  if (leftIndex > rightindex) {
-    return 1;
-  }
-
-  // Keep the order
-  return -1;
-};
diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js
index b978a777e45..ee47ef510af 100644
--- a/packages/react-scripts/config/webpack.config.prod.js
+++ b/packages/react-scripts/config/webpack.config.prod.js
@@ -23,7 +23,6 @@ const NameAllModulesPlugin = require('name-all-modules-plugin');
 const fs = require('fs');
 const paths = require('./paths');
 const getClientEnvironment = require('./env');
-const sortChunks = require('./sortChunks');
 
 // Webpack uses `publicPath` to determine where the app is being served from.
 // It requires a trailing slash, or the file assets will get an incorrect path.
@@ -287,11 +286,6 @@ module.exports = {
     new HtmlWebpackPlugin({
       inject: true,
       template: paths.appHtml,
-      // Need to ensure that the runtime is loaded first because
-      // it loads the rest, then the vendors
-      // And then the polyfills before the main
-      // The others chunks will be loaded after
-      chunksSortMode: sortChunks(['runtime', 'vendors', 'polyfills', 'main']),
       minify: {
         removeComments: true,
         collapseWhitespace: true,

From 75cf8c928ff4d0ba6f881e4131ac217a95590146 Mon Sep 17 00:00:00 2001
From: Ayc0 <benjamin.koltes@gmail.com>
Date: Thu, 21 Sep 2017 10:58:06 -0400
Subject: [PATCH 16/29] Pin the version of name-all-modules-plugin

---
 packages/react-scripts/package.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json
index 853256da7ab..adf76c8dcf0 100644
--- a/packages/react-scripts/package.json
+++ b/packages/react-scripts/package.json
@@ -45,7 +45,7 @@
     "fs-extra": "3.0.1",
     "html-webpack-plugin": "2.29.0",
     "jest": "20.0.4",
-    "name-all-modules-plugin": "^1.0.1",
+    "name-all-modules-plugin": "1.0.1",
     "object-assign": "4.1.1",
     "postcss-flexbugs-fixes": "3.2.0",
     "postcss-loader": "2.0.8",
@@ -67,4 +67,4 @@
   "optionalDependencies": {
     "fsevents": "1.1.2"
   }
-}
+}
\ No newline at end of file

From 3ef36177bc4d92f570a2a226913878cca40b2d6b Mon Sep 17 00:00:00 2001
From: Ayc0 <benjamin.koltes@gmail.com>
Date: Thu, 21 Sep 2017 10:58:17 -0400
Subject: [PATCH 17/29] Add comments in vendors.js

---
 packages/react-scripts/template/src/vendors.js | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/packages/react-scripts/template/src/vendors.js b/packages/react-scripts/template/src/vendors.js
index 6552aa74739..12f46ec68a8 100644
--- a/packages/react-scripts/template/src/vendors.js
+++ b/packages/react-scripts/template/src/vendors.js
@@ -1 +1,11 @@
+// This file controls which npm packages are extracted into a vendor bundle.
+// A vendor bundle is very useful for reducing your transmitted bundle size,
+// as dependencies which rarely change can be cached while you iterate on your
+// application.
+
+// If you want to add another vendor, just add in this array the name of the
+// npm package.
+
 module.exports = ['react', 'react-dom'];
+
+// You can delete this file if you'd prefer to not make a vendor bundle.

From f4a889d35d4a0d2b5d4d75d57507fe7e81359cec Mon Sep 17 00:00:00 2001
From: Ayc0 <benjamin.koltes@gmail.com>
Date: Thu, 21 Sep 2017 11:55:42 -0400
Subject: [PATCH 18/29] Change comments in vendors.js

---
 packages/react-scripts/template/src/vendors.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react-scripts/template/src/vendors.js b/packages/react-scripts/template/src/vendors.js
index 12f46ec68a8..2e3c58fb5b9 100644
--- a/packages/react-scripts/template/src/vendors.js
+++ b/packages/react-scripts/template/src/vendors.js
@@ -3,8 +3,8 @@
 // as dependencies which rarely change can be cached while you iterate on your
 // application.
 
-// If you want to add another vendor, just add in this array the name of the
-// npm package.
+// If you want to add another npm package to the vendor bundle, just add its
+// name in this array
 
 module.exports = ['react', 'react-dom'];
 

From 88dd88ef45a98da17b9b24adfb714df79f6f096f Mon Sep 17 00:00:00 2001
From: Ayc0 <benjamin.koltes@gmail.com>
Date: Thu, 21 Sep 2017 18:32:10 -0400
Subject: [PATCH 19/29] Add newline at the end of package.json

---
 packages/react-scripts/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json
index adf76c8dcf0..9b0caa7fe00 100644
--- a/packages/react-scripts/package.json
+++ b/packages/react-scripts/package.json
@@ -67,4 +67,4 @@
   "optionalDependencies": {
     "fsevents": "1.1.2"
   }
-}
\ No newline at end of file
+}

From 49ffbcb9b316cbd661f81440583373f19175c462 Mon Sep 17 00:00:00 2001
From: Ayc0 <benjamin.koltes@gmail.com>
Date: Thu, 21 Sep 2017 19:16:07 -0400
Subject: [PATCH 20/29] Desactivate
 webpack.optimize.CommonsChunkPlugin(vendors) in vendors.js doesn't exist

---
 .../react-scripts/config/webpack.config.prod.js   | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js
index ee47ef510af..f664b985ac3 100644
--- a/packages/react-scripts/config/webpack.config.prod.js
+++ b/packages/react-scripts/config/webpack.config.prod.js
@@ -38,6 +38,9 @@ const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';
 const publicUrl = publicPath.slice(0, -1);
 // Get environment variables to inject into our app.
 const env = getClientEnvironment(publicUrl);
+// Allow to desactivate webpack plugin
+const activateWebpackPluginOnCondition = (condition, plugin) =>
+  condition ? [plugin] : [];
 
 // Assert this just to be safe.
 // Development builds of React are slow and not intended for production.
@@ -391,10 +394,14 @@ module.exports = {
     }),
 
     // Avoid having the vendors in the rest of the app
-    new webpack.optimize.CommonsChunkPlugin({
-      name: 'vendors',
-      minChunks: Infinity,
-    }),
+    // Only execute if the vendors file exists
+    ...activateWebpackPluginOnCondition(
+      fs.existsSync(paths.appVendors),
+      new webpack.optimize.CommonsChunkPlugin({
+        name: 'vendors',
+        minChunks: Infinity,
+      })
+    ),
     // The runtime is the part of Webpack that resolves modules
     // at runtime and handles async loading and more
     new webpack.optimize.CommonsChunkPlugin({

From 6778d8262fa5f2dfed552f939457615dcd0b38af Mon Sep 17 00:00:00 2001
From: Ayc0 <benjamin.koltes@gmail.com>
Date: Fri, 22 Sep 2017 05:44:52 +0200
Subject: [PATCH 21/29] Change the way the optimize pluggin for the vendors is
 set or removed

---
 .../config/webpack.config.prod.js             | 21 +++++++++----------
 1 file changed, 10 insertions(+), 11 deletions(-)

diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js
index f664b985ac3..343feef86d9 100644
--- a/packages/react-scripts/config/webpack.config.prod.js
+++ b/packages/react-scripts/config/webpack.config.prod.js
@@ -38,9 +38,6 @@ const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';
 const publicUrl = publicPath.slice(0, -1);
 // Get environment variables to inject into our app.
 const env = getClientEnvironment(publicUrl);
-// Allow to desactivate webpack plugin
-const activateWebpackPluginOnCondition = (condition, plugin) =>
-  condition ? [plugin] : [];
 
 // Assert this just to be safe.
 // Development builds of React are slow and not intended for production.
@@ -395,13 +392,13 @@ module.exports = {
 
     // Avoid having the vendors in the rest of the app
     // Only execute if the vendors file exists
-    ...activateWebpackPluginOnCondition(
-      fs.existsSync(paths.appVendors),
-      new webpack.optimize.CommonsChunkPlugin({
-        name: 'vendors',
-        minChunks: Infinity,
-      })
-    ),
+
+    fs.existsSync(paths.appVendors)
+      ? new webpack.optimize.CommonsChunkPlugin({
+          name: 'vendors',
+          minChunks: Infinity,
+        })
+      : null,
     // The runtime is the part of Webpack that resolves modules
     // at runtime and handles async loading and more
     new webpack.optimize.CommonsChunkPlugin({
@@ -411,7 +408,9 @@ module.exports = {
     // https://medium.com/webpack/predictable-long-term-caching-with-webpack-d3eee1d3fa31
     // Name the modules that were not named by the previous plugins
     new NameAllModulesPlugin(),
-  ],
+  ]
+    // Remove null elements
+    .filter(Boolean),
   // Some libraries import Node modules but don't use them in the browser.
   // Tell Webpack to provide empty mocks for them so importing them works.
   node: {

From f37f51db3788c34e7b6f4fa912d20d4cb019cf00 Mon Sep 17 00:00:00 2001
From: Ayc0 <benjamin.koltes@gmail.com>
Date: Sat, 23 Sep 2017 10:34:45 +0200
Subject: [PATCH 22/29] Change the way unamed chunks are named

---
 packages/react-scripts/config/webpack.config.prod.js | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js
index 343feef86d9..0c7e4499b57 100644
--- a/packages/react-scripts/config/webpack.config.prod.js
+++ b/packages/react-scripts/config/webpack.config.prod.js
@@ -384,10 +384,14 @@ module.exports = {
       if (chunk.name) {
         return chunk.name;
       }
-      return chunk
-        .mapModules(m => m.request)
-        .map(filename => path.basename(filename, path.extname(filename)))
-        .join('_');
+      const chunkNames = chunk.mapModules(m => m);
+      // Sort the chunks by their depth
+      // The first one is the imported chunk
+      // The others are those imported its dependencies
+      chunkNames.sort((chunkA, chunkB) => chunkA.depth - chunkB.depth);
+      // Get the absolute path of the file
+      const fileName = chunkNames[0].resource;
+      return path.basename(fileName, path.extname(fileName));
     }),
 
     // Avoid having the vendors in the rest of the app

From 6277cd356590de016b493362f6bde47f8dc331dc Mon Sep 17 00:00:00 2001
From: Ayc0 <benjamin.koltes@gmail.com>
Date: Sat, 23 Sep 2017 11:03:52 +0200
Subject: [PATCH 23/29] Change commentaries

---
 packages/react-scripts/config/webpack.config.prod.js | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js
index 0c7e4499b57..9ccc7d4b601 100644
--- a/packages/react-scripts/config/webpack.config.prod.js
+++ b/packages/react-scripts/config/webpack.config.prod.js
@@ -385,12 +385,13 @@ module.exports = {
         return chunk.name;
       }
       const chunkNames = chunk.mapModules(m => m);
-      // Sort the chunks by their depth
-      // The first one is the imported chunk
-      // The others are those imported its dependencies
+      // Sort the chunks by their depths
+      // The chunk with the lower depth is the imported one
+      // The others are its dependencies
       chunkNames.sort((chunkA, chunkB) => chunkA.depth - chunkB.depth);
       // Get the absolute path of the file
       const fileName = chunkNames[0].resource;
+      // Return the name of the file without the extension
       return path.basename(fileName, path.extname(fileName));
     }),
 

From 779faee424451aff4a287d3a9cbb18aff7583ee5 Mon Sep 17 00:00:00 2001
From: Ayc0 <benjamin.koltes@gmail.com>
Date: Fri, 29 Sep 2017 07:30:10 +0200
Subject: [PATCH 24/29] Check if every vendors are defined in the package.json

---
 packages/react-scripts/scripts/build.js | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/packages/react-scripts/scripts/build.js b/packages/react-scripts/scripts/build.js
index 930897008e1..d5eb9f427fb 100644
--- a/packages/react-scripts/scripts/build.js
+++ b/packages/react-scripts/scripts/build.js
@@ -57,6 +57,26 @@ measureFileSizesBeforeBuild(paths.appBuild)
     fs.emptyDirSync(paths.appBuild);
     // Merge with the public folder
     copyPublicFolder();
+
+    // Check if every vendors are defined in the package.json
+    const dependencies = Object.keys(
+      require(paths.appPackageJson).dependencies
+    );
+    const vendors = fs.existsSync(paths.appVendors)
+      ? require(paths.appVendors)
+      : [];
+    const missingVendors = vendors.filter(
+      vendor => dependencies.indexOf(vendor) === -1
+    );
+    if (missingVendors.length > 0) {
+      throw new Error(
+        'Error: Unknown vendors: ' +
+          chalk.yellow(missingVendors) +
+          " should be listed in the project's dependencies.\n" +
+          `(Vendors defined in '${path.resolve(paths.appVendors)}')`
+      );
+    }
+
     // Start the webpack build
     return build(previousFileSizes);
   })

From 910a5f7fd3d8c82b4c34c83795ce3796a3efbcea Mon Sep 17 00:00:00 2001
From: Ayc0 <benjamin.koltes@gmail.com>
Date: Fri, 29 Sep 2017 14:31:08 +0200
Subject: [PATCH 25/29] Add devDeps and peerDeps

---
 packages/react-scripts/scripts/build.js | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/react-scripts/scripts/build.js b/packages/react-scripts/scripts/build.js
index d5eb9f427fb..eafbe7b2269 100644
--- a/packages/react-scripts/scripts/build.js
+++ b/packages/react-scripts/scripts/build.js
@@ -59,9 +59,10 @@ measureFileSizesBeforeBuild(paths.appBuild)
     copyPublicFolder();
 
     // Check if every vendors are defined in the package.json
-    const dependencies = Object.keys(
-      require(paths.appPackageJson).dependencies
-    );
+    const packageJson = require(paths.appPackageJson);
+    const dependencies = Object.keys(packageJson.dependencies || {})
+      .concat(Object.keys(packageJson.devDependencies || {}))
+      .concat(Object.keys(packageJson.peerDependencies || {}));
     const vendors = fs.existsSync(paths.appVendors)
       ? require(paths.appVendors)
       : [];

From 0d3b82c749f4f3fd706573c1b561d37a6f56a4d4 Mon Sep 17 00:00:00 2001
From: Ayc0 <benjamin.koltes@gmail.com>
Date: Fri, 29 Sep 2017 14:53:31 +0200
Subject: [PATCH 26/29] Update comments

---
 packages/react-scripts/scripts/build.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/react-scripts/scripts/build.js b/packages/react-scripts/scripts/build.js
index eafbe7b2269..f5e367b6ebe 100644
--- a/packages/react-scripts/scripts/build.js
+++ b/packages/react-scripts/scripts/build.js
@@ -59,6 +59,10 @@ measureFileSizesBeforeBuild(paths.appBuild)
     copyPublicFolder();
 
     // Check if every vendors are defined in the package.json
+    // @remove-on-eject-begin
+    // The devDepencencies shouldn't be available for vendors
+    // But otherwise the tests fail.
+    // @remove-on-eject-end
     const packageJson = require(paths.appPackageJson);
     const dependencies = Object.keys(packageJson.dependencies || {})
       .concat(Object.keys(packageJson.devDependencies || {}))

From 50782f3f1b60f3e12b4ccff7f4d0a7e1f96ba203 Mon Sep 17 00:00:00 2001
From: Ayc0 <benjamin.koltes@gmail.com>
Date: Thu, 18 Jan 2018 07:16:17 +0100
Subject: [PATCH 27/29] Export code in a detectMissingVendors function of
 react-dev-utils

---
 .../react-dev-utils/detectMissingVendors.js   | 34 +++++++++++++++++++
 packages/react-scripts/scripts/build.js       | 20 ++---------
 2 files changed, 36 insertions(+), 18 deletions(-)
 create mode 100644 packages/react-dev-utils/detectMissingVendors.js

diff --git a/packages/react-dev-utils/detectMissingVendors.js b/packages/react-dev-utils/detectMissingVendors.js
new file mode 100644
index 00000000000..93978a29c69
--- /dev/null
+++ b/packages/react-dev-utils/detectMissingVendors.js
@@ -0,0 +1,34 @@
+// @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';
+
+const fs = require('fs');
+const path = require('path');
+const chalk = require('chalk');
+
+function detectMissingVendors(pathToPackageJson, pathToVendors) {
+  const packageJson = require(pathToPackageJson);
+  const dependencies = Object.keys(packageJson.dependencies || {})
+    .concat(Object.keys(packageJson.devDependencies || {}))
+    .concat(Object.keys(packageJson.peerDependencies || {}));
+  const vendors = fs.existsSync(pathToVendors) ? require(pathToVendors) : [];
+  const missingVendors = vendors.filter(
+    vendor => dependencies.indexOf(vendor) === -1
+  );
+  if (missingVendors.length > 0) {
+    throw new Error(
+      'Error: Unknown vendors: ' +
+        chalk.yellow(missingVendors) +
+        " should be listed in the project's dependencies.\n" +
+        `(Vendors defined in '${path.resolve(pathToVendors)}')`
+    );
+  }
+}
+
+module.exports = detectMissingVendors;
diff --git a/packages/react-scripts/scripts/build.js b/packages/react-scripts/scripts/build.js
index f5e367b6ebe..0b4fecee2b7 100644
--- a/packages/react-scripts/scripts/build.js
+++ b/packages/react-scripts/scripts/build.js
@@ -29,6 +29,7 @@ const webpack = require('webpack');
 const config = require('../config/webpack.config.prod');
 const paths = require('../config/paths');
 const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
+const detectMissingVendors = require('react-dev-utils/detectMissingVendors');
 const formatWebpackMessages = require('react-dev-utils/formatWebpackMessages');
 const printHostingInstructions = require('react-dev-utils/printHostingInstructions');
 const FileSizeReporter = require('react-dev-utils/FileSizeReporter');
@@ -63,24 +64,7 @@ measureFileSizesBeforeBuild(paths.appBuild)
     // The devDepencencies shouldn't be available for vendors
     // But otherwise the tests fail.
     // @remove-on-eject-end
-    const packageJson = require(paths.appPackageJson);
-    const dependencies = Object.keys(packageJson.dependencies || {})
-      .concat(Object.keys(packageJson.devDependencies || {}))
-      .concat(Object.keys(packageJson.peerDependencies || {}));
-    const vendors = fs.existsSync(paths.appVendors)
-      ? require(paths.appVendors)
-      : [];
-    const missingVendors = vendors.filter(
-      vendor => dependencies.indexOf(vendor) === -1
-    );
-    if (missingVendors.length > 0) {
-      throw new Error(
-        'Error: Unknown vendors: ' +
-          chalk.yellow(missingVendors) +
-          " should be listed in the project's dependencies.\n" +
-          `(Vendors defined in '${path.resolve(paths.appVendors)}')`
-      );
-    }
+    detectMissingVendors(paths.appPackageJson, paths.appVendors);
 
     // Start the webpack build
     return build(previousFileSizes);

From 7629f7a1433084d6103e67e3ec913aae43ec3828 Mon Sep 17 00:00:00 2001
From: Ayc0 <benjamin.koltes@gmail.com>
Date: Thu, 18 Jan 2018 07:36:25 +0100
Subject: [PATCH 28/29] Use json files instead of js files for vendors

---
 packages/react-scripts/config/paths.js                |  6 +++---
 .../react-scripts/fixtures/kitchensink/src/vendors.js |  1 -
 .../fixtures/kitchensink/src/vendors.json             |  1 +
 packages/react-scripts/template/src/vendors.js        | 11 -----------
 packages/react-scripts/template/src/vendors.json      |  1 +
 5 files changed, 5 insertions(+), 15 deletions(-)
 delete mode 100644 packages/react-scripts/fixtures/kitchensink/src/vendors.js
 create mode 100644 packages/react-scripts/fixtures/kitchensink/src/vendors.json
 delete mode 100644 packages/react-scripts/template/src/vendors.js
 create mode 100644 packages/react-scripts/template/src/vendors.json

diff --git a/packages/react-scripts/config/paths.js b/packages/react-scripts/config/paths.js
index 63ea4580c7c..7a8f14d314c 100644
--- a/packages/react-scripts/config/paths.js
+++ b/packages/react-scripts/config/paths.js
@@ -53,7 +53,7 @@ module.exports = {
   appPublic: resolveApp('public'),
   appHtml: resolveApp('public/index.html'),
   appIndexJs: resolveApp('src/index.js'),
-  appVendors: resolveApp('src/vendors.js'),
+  appVendors: resolveApp('src/vendors.json'),
   appPackageJson: resolveApp('package.json'),
   appSrc: resolveApp('src'),
   yarnLockFile: resolveApp('yarn.lock'),
@@ -74,7 +74,7 @@ module.exports = {
   appPublic: resolveApp('public'),
   appHtml: resolveApp('public/index.html'),
   appIndexJs: resolveApp('src/index.js'),
-  appVendors: resolveApp('src/vendors.js'),
+  appVendors: resolveApp('src/vendors.json'),
   appPackageJson: resolveApp('package.json'),
   appSrc: resolveApp('src'),
   yarnLockFile: resolveApp('yarn.lock'),
@@ -105,7 +105,7 @@ if (
     appPublic: resolveOwn('template/public'),
     appHtml: resolveOwn('template/public/index.html'),
     appIndexJs: resolveOwn('template/src/index.js'),
-    appVendors: resolveOwn('template/src/vendors.js'),
+    appVendors: resolveOwn('template/src/vendors.json'),
     appPackageJson: resolveOwn('package.json'),
     appSrc: resolveOwn('template/src'),
     yarnLockFile: resolveOwn('template/yarn.lock'),
diff --git a/packages/react-scripts/fixtures/kitchensink/src/vendors.js b/packages/react-scripts/fixtures/kitchensink/src/vendors.js
deleted file mode 100644
index 6552aa74739..00000000000
--- a/packages/react-scripts/fixtures/kitchensink/src/vendors.js
+++ /dev/null
@@ -1 +0,0 @@
-module.exports = ['react', 'react-dom'];
diff --git a/packages/react-scripts/fixtures/kitchensink/src/vendors.json b/packages/react-scripts/fixtures/kitchensink/src/vendors.json
new file mode 100644
index 00000000000..31a306a1686
--- /dev/null
+++ b/packages/react-scripts/fixtures/kitchensink/src/vendors.json
@@ -0,0 +1 @@
+["react", "react-dom"]
diff --git a/packages/react-scripts/template/src/vendors.js b/packages/react-scripts/template/src/vendors.js
deleted file mode 100644
index 2e3c58fb5b9..00000000000
--- a/packages/react-scripts/template/src/vendors.js
+++ /dev/null
@@ -1,11 +0,0 @@
-// This file controls which npm packages are extracted into a vendor bundle.
-// A vendor bundle is very useful for reducing your transmitted bundle size,
-// as dependencies which rarely change can be cached while you iterate on your
-// application.
-
-// If you want to add another npm package to the vendor bundle, just add its
-// name in this array
-
-module.exports = ['react', 'react-dom'];
-
-// You can delete this file if you'd prefer to not make a vendor bundle.
diff --git a/packages/react-scripts/template/src/vendors.json b/packages/react-scripts/template/src/vendors.json
new file mode 100644
index 00000000000..31a306a1686
--- /dev/null
+++ b/packages/react-scripts/template/src/vendors.json
@@ -0,0 +1 @@
+["react", "react-dom"]

From 0fdaac1110cddf1d81b259b540cad34d224a6e60 Mon Sep 17 00:00:00 2001
From: Ayc0 <benjamin.koltes@gmail.com>
Date: Thu, 18 Jan 2018 08:15:44 +0100
Subject: [PATCH 29/29] Add detectMissingVendors in files of
 react-dev-utils/package.json

---
 packages/react-dev-utils/package.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/react-dev-utils/package.json b/packages/react-dev-utils/package.json
index 1961bf1fc8d..a830f2b0794 100644
--- a/packages/react-dev-utils/package.json
+++ b/packages/react-dev-utils/package.json
@@ -16,6 +16,7 @@
     "clearConsole.js",
     "crashOverlay.js",
     "crossSpawn.js",
+    "detectMissingVendors.js",
     "eslintFormatter.js",
     "errorOverlayMiddleware.js",
     "FileSizeReporter.js",