update ssr readme and code cleanup

Author: raymondsze

packages/create-react-scripts-dll/index.js

@@ -1,16 +1,39 @@
+'use strict';
+
 const path = require('path');
+const webpack = require('webpack');
 const AutoDllPlugin = require('autodll-webpack-plugin');
+const AssetsPlugin = require('assets-webpack-plugin');
+
+// Source maps are resource heavy and can cause out of memory issue for large source files.
+const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';
 
 module.exports = options => ({
-  webpack(config) {
+  webpack(config, env) {
     const appPackageJson = path.join(process.cwd(), 'package.json');
     const vendor = require(appPackageJson).vendor || [];
+    const dllPlugins = [];
+    // uglify the vendor js if in production mode
+    if (env === 'production') {
+      dllPlugins.push(new webpack.optimize.UglifyJsPlugin({
+        compress: {
+          warnings: false,
+          comparisons: false,
+        },
+        output: {
+          comments: false,
+          ascii_only: true,
+        },
+        sourceMap: shouldUseSourceMap,
+      }));
+    }
     config.plugins.push(
       new AutoDllPlugin(Object.assign({
         inject: true,
         filename: '[name].[hash:8].js',
-        path: './static/js',
+        path: './static/js/',
         entry: { vendor },
+        plugins: dllPlugins,
       }, options))
     );
     return config;

packages/create-react-scripts-dll/package.json

@@ -9,6 +9,7 @@
     "url": "https://github.com/raymondsze/create-react-scripts/issues"
   },
   "dependencies": {
+    "assets-webpack-plugin": "3.5.1",
     "autodll-webpack-plugin": "0.2.1",
     "webpack": "3.6.0",
     "webpack-dll-bundles-plugin": "^1.0.0-beta.5"

packages/create-react-scripts-graphql/index.js

@@ -1,3 +1,5 @@
+'use strict';
+
 const fs = require('fs');
 const path = require('path');
 const { getFileLoader } = require('create-react-scripts-utils');

packages/create-react-scripts-less/index.js

@@ -1,3 +1,5 @@
+'use strict';
+
 const path = require('path');
 const { getCssLoader, getFileLoader } = require('create-react-scripts-utils');
 

packages/create-react-scripts-sass/index.js

@@ -1,3 +1,5 @@
+'use strict';
+
 const path = require('path');
 const { getCssLoader, getFileLoader } = require('create-react-scripts-utils');
 

packages/create-react-scripts-ssr/README.md

@@ -84,15 +84,22 @@ const HOST = process.env.HOST || '0.0.0.0';
 const PORT = parseInt(process.env.PORT, 10) || 5000;
 const PROTOCOL = process.env.PROTOCOL || 'http';
 
-// Assets path from client-side build
+// Assets manifest path from client-side dll build (if create-react-scripts-dll is using)
+const DLL_ASSETS_PATH = path.join(process.cwd(), 'build/dll-assets.json');
+// Assets manifest path from client-side build
 const ASSETS_PATH = path.join(process.cwd(), 'build/assets.json');
 
 // Wait until client-side bundling finished so that assets.json is produced
 console.log('Waiting client-side bundling...');
 while (!fs.existsSync(ASSETS_PATH));
 
 // Read the assets
-const assets = JSON.parse(fs.readFileSync(ASSETS_PATH));
+const assets = {
+  // make sure dll assets before the assets of client-side build
+  // ensure browser require the vendor module first
+  ...JSON.parse(fs.readFileSync(DLL_ASSETS_PATH)),
+  ...JSON.parse(fs.readFileSync(ASSETS_PATH)),
+};
 
 const app = express();
 // in production, the serving files are under build/client folder

packages/create-react-scripts-ssr/config/webpack.config.server.js

@@ -105,15 +105,14 @@ module.exports = (paths, config, publicPath) => {
   );
   delete DefinePlugin.definitions['process.env'];
 
-  /*
   webpackConfig.plugins.push(
     new webpack.BannerPlugin({
       banner: 'require(\'source-map-support\').install();',
       raw: true,
       entryOnly: false,
     })
   );
-*/
+
   if (process.env.NODE_ENV === 'development') {
     // inject other environment variable
     DefinePlugin.definitions['process.env.HOST'] = `"${process.env.HOST}"`;

packages/create-react-scripts-ssr/index.js

@@ -2,7 +2,7 @@
 
 const fs = require('fs');
 const path = require('path');
-const AssetsPlugin = require('assets-webpack-plugin')
+const AssetsPlugin = require('assets-webpack-plugin');
 
 module.exports = () => ({
   paths(paths) {
@@ -15,6 +15,7 @@ module.exports = () => ({
     paths.appBuild = path.join(paths.appBuild, 'client');
     paths.appHtml = path.join(fs.realpathSync(process.cwd()), 'public/index-static.html');
     paths.appAssets = path.join(paths.appBuild, '..');
+    paths.appDllAssets = path.join(paths.appBuild, '..');
     return paths;
   },
   webpack(config, NODE_ENV) {
@@ -41,13 +42,35 @@ module.exports = () => ({
       htmlWebpackPlugin.options.filename = 'index-static.html';
     }
 
+    const autoDllPlugin = config.plugins.find(
+      plugin => plugin.constructor.name === 'AutoDLLPlugin'
+    );
+    if (autoDllPlugin) {
+      const pluginOptions = autoDllPlugin.originalSettings;
+      const dllSubPlugins = pluginOptions.plugins || [];
+      pluginOptions.plugins = dllSubPlugins.concat([
+        new AssetsPlugin({
+          filename: 'dll-assets.json',
+          path: this.paths.appDllAssets,
+          fullPath: true,
+          processOutput: (assets) => {
+            Object.values(assets).forEach(mod => {
+              if (mod.js) mod.js = config.output.publicPath + path.join(pluginOptions.path || '', mod.js);
+            });
+            return JSON.stringify(assets);
+          }
+        })
+      ]);
+    }
+
     config.plugins.push(
       new AssetsPlugin({
         filename: 'assets.json',
         path: this.paths.appAssets,
         fullPath: true,
       })
     );
+
     return config;
   },
   scripts: {

packages/example-universal-react-app/crs.config.js

@@ -1,6 +1,6 @@
 const { compose } = require('create-react-scripts');
 
 module.exports = compose(
-  require('react-scripts-web'),
-  require('create-react-scripts-ssr')()
+  require('create-react-scripts-ssr')(),
+  require('react-scripts-web')
 );

packages/example-universal-react-app/src/server.js

@@ -14,11 +14,16 @@ const PORT = process.env.PORT || '5000';
 const PROTOCOL = process.env.PROTOCOL || 'http';
 
 const ASSETS_PATH = path.join(process.cwd(), 'build/assets.json');
+const DLL_ASSETS_PATH = path.join(process.cwd(), 'build/dll-assets.json');
 
 console.log('Waiting client-side bundling...');
 while (!fs.existsSync(ASSETS_PATH));
 
-const assets = JSON.parse(fs.readFileSync(ASSETS_PATH));
+const assets = {
+  ...JSON.parse(fs.readFileSync(DLL_ASSETS_PATH)),
+  ...JSON.parse(fs.readFileSync(ASSETS_PATH)),
+};
+
 const app = express();
 
 if (process.env.NODE_ENV === 'production') {