refactor(v2): simplify + optimize server (#1343)

packages/docusaurus/lib/core/serverEntry.js

@@ -10,11 +10,10 @@ import React from 'react';
 import {StaticRouter} from 'react-router-dom';
 import ReactDOMServer from 'react-dom/server';
 import Helmet from 'react-helmet';
-import {getBundles} from 'react-loadable/webpack';
+import {getBundles} from 'react-loadable-ssr-addon';
 import Loadable from 'react-loadable';
 
-import reactLoadableStats from '@generated/react-loadable.json'; //eslint-disable-line
-import webpackClientStats from '@build/client.stats.json'; //eslint-disable-line
+import manifest from '@build/assets-manifest.json'; //eslint-disable-line
 import routes from '@generated/routes'; // eslint-disable-line
 import preload from './preload';
 import App from './App';
@@ -43,15 +42,11 @@ export default function render(locals) {
     ];
     const metaAttributes = metaStrings.filter(Boolean);
 
-    const bundles = getBundles(reactLoadableStats, modules);
-    const assets = [
-      ...webpackClientStats.assetsByChunkName.main,
-      ...webpackClientStats.assetsByChunkName.common,
-      ...webpackClientStats.assetsByChunkName.vendors,
-      ...bundles.map(bundle => bundle.file),
-    ];
-    const scripts = assets.filter(value => value.match(/\.js$/));
-    const stylesheets = assets.filter(value => value.match(/\.css$/));
+    // Get all required assets for this particular page based on client manifest information
+    const modulesToBeLoaded = [...manifest.entrypoints, ...Array.from(modules)];
+    const bundles = getBundles(manifest, modulesToBeLoaded);
+    const stylesheets = (bundles.css || []).map(b => b.file);
+    const scripts = (bundles.js || []).map(b => b.file);
     const {baseUrl} = locals;
 
     return ejs.render(

packages/docusaurus/lib/webpack/base.js

@@ -37,6 +37,8 @@ module.exports = function createBaseConfig(props, isServer) {
     resolve: {
       symlinks: true,
       alias: {
+        // https://github.com/gaearon/react-hot-loader#react--dom
+        'react-dom': isProd ? 'react-dom' : '@hot-loader/react-dom',
         '@theme': themePath,
         '@site': siteDir,
         '@build': outDir,

packages/docusaurus/lib/webpack/client.js

@@ -7,8 +7,7 @@
 
 const path = require('path');
 const WebpackNiceLog = require('webpack-nicelog');
-const {StatsWriterPlugin} = require('webpack-stats-plugin');
-const {ReactLoadablePlugin} = require('react-loadable/webpack');
+const ReactLoadableSSRAddon = require('react-loadable-ssr-addon');
 const merge = require('webpack-merge');
 
 const createBaseConfig = require('./base');
@@ -16,26 +15,15 @@ const createBaseConfig = require('./base');
 module.exports = function createClientConfig(props) {
   const isProd = process.env.NODE_ENV === 'production';
   const config = createBaseConfig(props);
-  const {generatedFilesDir} = props;
 
   const clientConfig = merge(config, {
     entry: {
       main: path.resolve(__dirname, '../core/clientEntry.js'),
     },
-    resolve: {
-      alias: {
-        // https://github.com/gaearon/react-hot-loader#react--dom
-        'react-dom': '@hot-loader/react-dom',
-      },
-    },
     plugins: [
-      // Write webpack stats object so we can pickup correct client bundle path in server.
-      new StatsWriterPlugin({
-        filename: 'client.stats.json',
-      }),
-      // React-loadable manifests
-      new ReactLoadablePlugin({
-        filename: path.join(generatedFilesDir, 'react-loadable.json'),
+      // Generate manifests file
+      new ReactLoadableSSRAddon({
+        filename: 'assets-manifest.json',
       }),
       // Show compilation progress bar and build time.
       new WebpackNiceLog({

packages/docusaurus/lib/webpack/server.js

@@ -5,6 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+const nodeExternals = require('webpack-node-externals');
 const path = require('path');
 const StaticSiteGeneratorPlugin = require('static-site-generator-webpack-plugin');
 const WebpackNiceLog = require('webpack-nicelog');
@@ -27,11 +28,8 @@ module.exports = function createServerConfig(props) {
       globalObject: 'this',
     },
     target: 'node',
-    resolve: {
-      alias: {
-        ejs: 'ejs/ejs.min.js',
-      },
-    },
+    // No need to bundle its node_modules dependencies since we're bundling for static html generation (backend)
+    externals: [nodeExternals()],
     plugins: [
       // Static site generator webpack plugin.
       new StaticSiteGeneratorPlugin({

packages/docusaurus/package.json

@@ -60,6 +60,7 @@
     "react-hot-loader": "^4.8.2",
     "react-listener-provider": "^0.2.0",
     "react-loadable": "^5.5.0",
+    "react-loadable-ssr-addon": "^0.1.6",
     "react-perimeter": "^0.4.0",
     "react-router-config": "^5.0.0",
     "react-router-dom": "^5.0.0",
@@ -68,12 +69,12 @@
     "static-site-generator-webpack-plugin": "^3.4.2",
     "style-loader": "^0.22.1",
     "terser-webpack-plugin": "^1.2.3",
-    "webpack": "^4.26.0",
+    "webpack": "^4.29.6",
     "webpack-bundle-analyzer": "^3.1.0",
     "webpack-dev-server": "^3.2.1",
     "webpack-merge": "^4.1.4",
     "webpack-nicelog": "^2.3.1",
-    "webpack-stats-plugin": "^0.2.1"
+    "webpack-node-externals": "^1.7.2"
   },
   "peerDependencies": {
     "react": "^16.8.4",