added vendor chuncking

Author: shrynx

packages/react-scripts/config/paths.js

@@ -64,6 +64,7 @@ module.exports = {
   appIndexJs: resolveApp(
     customEntryFile(resolveApp('package.json'), '') || 'src/index.js'
   ),
+  appVendorJs: resolveApp('src/vendor.js'),
   appPackageJson: resolveApp('package.json'),
   appSrc: resolveApp('src'),
   yarnLockFile: resolveApp('yarn.lock'),
@@ -86,6 +87,7 @@ module.exports = {
   appIndexJs: resolveApp(
     customEntryFile(resolveApp('package.json'), '') || 'src/index.js'
   ),
+  appVendorJs: resolveApp('src/vendor.js'),
   appPackageJson: resolveApp('package.json'),
   appSrc: resolveApp('src'),
   yarnLockFile: resolveApp('yarn.lock'),
@@ -119,6 +121,7 @@ if (
       customEntryFile(resolveOwn('package.json'), 'template/') ||
         'template/src/index.js'
     ),
+    appVendorJs: resolveOwn('template/src/vendor.js'),
     appPackageJson: resolveOwn('package.json'),
     appSrc: resolveOwn('template/src'),
     yarnLockFile: resolveOwn('template/yarn.lock'),

packages/react-scripts/package.json

@@ -47,6 +47,7 @@
     "jest": "20.0.4",
     "less": "^2.7.2",
     "less-loader": "^4.0.5",
+    "name-all-modules-plugin": "^1.0.1",
     "node-sass": "^4.5.3",
     "object-assign": "4.1.1",
     "postcss-flexbugs-fixes": "3.0.0",
@@ -55,6 +56,7 @@
     "react-dev-utils": "^3.0.2",
     "react-error-overlay": "^1.0.9",
     "sass-loader": "^6.0.6",
+    "script-ext-html-webpack-plugin": "^1.8.5",
     "style-loader": "0.18.2",
     "sw-precache-webpack-plugin": "0.11.3",
     "url-loader": "0.5.9",

packages/react-scripts/scripts/utils/superScriptWebpackConfigurator.js

@@ -2,9 +2,64 @@
 
 const ExtractTextPlugin = require('extract-text-webpack-plugin');
 const autoprefixer = require('autoprefixer');
+const fs = require('fs');
+const path = require('path');
+const webpack = require('webpack');
+const ScriptExtHtmlWebpackPlugin = require('script-ext-html-webpack-plugin');
 const paths = require('../../config/paths');
 const superScriptConfigOptions = require('./superScriptConfigOption');
 
+const addVendorSplitting = ({ config, env }) => {
+  const checkIfVendorFileExists = fs.existsSync(paths.appVendorJs);
+  if (env === 'prod' && checkIfVendorFileExists) {
+    // Add the entry point based on whether vendor file exists.
+    config.entry = {
+      vendor: [require.resolve('../../config/polyfills'), paths.appVendorJs],
+      main: paths.appIndexJs,
+    };
+
+    const vendorChcukedConfig = addPluginAtStart(config, [
+      new webpack.NamedModulesPlugin(),
+      new webpack.NamedChunksPlugin(chunk => {
+        if (chunk.name) {
+          return chunk.name;
+        }
+        return chunk.modules
+          .map(m => path.relative(m.context, m.request))
+          .join('_');
+      }),
+      new webpack.optimize.CommonsChunkPlugin(
+        // generate a seperate chucks for vendor
+        // else don't generate any common chunck
+        {
+          name: 'vendor',
+          minChunks: Infinity,
+        }
+      ),
+      // We need to extract out the runtime into a separate manifest file.
+      // more info: https://webpack.js.org/guides/code-splitting-libraries/#manifest-file
+      new webpack.optimize.CommonsChunkPlugin(
+        // generate a seperate chucks for manifest file
+        // else don't generate any common chunck
+        {
+          name: 'manifest',
+        }
+      ),
+    ]);
+
+    // This ensures that the browser will load the scripts in parallel,
+    // but execute them in the order they appear in the document.
+    const configWithVendorAndDefer = addPluginAtEnd(vendorChcukedConfig, [
+      new ScriptExtHtmlWebpackPlugin({
+        defaultAttribute: 'defer',
+      }),
+    ]);
+
+    return { config: configWithVendorAndDefer, env };
+  }
+  return { config, env };
+};
+
 const addPreactAlias = ({ config, env }) => {
   if (superScriptConfigOptions('usePreact')) {
     const preactAlias = {
@@ -331,7 +386,8 @@ const superScriptWebpackConfigurator = (config, env) => {
     addImageLoader,
     updateBabelConfig,
     updateEslintConfig,
-    addPreactAlias
+    addPreactAlias,
+    addVendorSplitting
   );
 
   return superScriptWebpackConfig(configParam).config;