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 manifest from '@build/assets-manifest.json'; //eslint-disable-line
-import webpackClientStats from '@build/client.stats.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);
+    // Get all required assets for this particular page based on client manifest information
-    const assets = [
+    const modulesToBeLoaded = [...manifest.entrypoints, ...Array.from(modules)];
-      ...webpackClientStats.assetsByChunkName.main,
+    const bundles = getBundles(manifest, modulesToBeLoaded);
-      ...webpackClientStats.assetsByChunkName.common,
+    const stylesheets = (bundles.css || []).map(b => b.file);
-      ...webpackClientStats.assetsByChunkName.vendors,
+    const scripts = (bundles.js || []).map(b => b.file);
-      ...bundles.map(bundle => bundle.file),
-    ];
-    const scripts = assets.filter(value => value.match(/\.js$/));
-    const stylesheets = assets.filter(value => value.match(/\.css$/));
     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 ReactLoadableSSRAddon = require('react-loadable-ssr-addon');
-const {ReactLoadablePlugin} = require('react-loadable/webpack');
 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.
+      // Generate manifests file
-      new StatsWriterPlugin({
+      new ReactLoadableSSRAddon({
-        filename: 'client.stats.json',
+        filename: 'assets-manifest.json',
-      }),
-      // React-loadable manifests
-      new ReactLoadablePlugin({
-        filename: path.join(generatedFilesDir, 'react-loadable.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: {
+    // No need to bundle its node_modules dependencies since we're bundling for static html generation (backend)
-      alias: {
+    externals: [nodeExternals()],
-        ejs: 'ejs/ejs.min.js',
-      },
-    },
     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",

yarn.lock

@@ -10919,6 +10919,11 @@ react-listener-provider@^0.2.0:
   resolved "https://registry.yarnpkg.com/react-listener-provider/-/react-listener-provider-0.2.0.tgz#fb6ce123f9e20ad948f75906ddf647db1df31f18"
   integrity sha1-+2zhI/niCtlI91kG3fZH2x3zHxg=
 
+react-loadable-ssr-addon@^0.1.6:
+  version "0.1.6"
+  resolved "https://registry.yarnpkg.com/react-loadable-ssr-addon/-/react-loadable-ssr-addon-0.1.6.tgz#de3e45f2b3876dc7b9afae19138370f0588b7300"
+  integrity sha512-D/Du+YH9EI77CoogenWU0F/EmHjJH2K3B9lH29yF1mcHOpFKccCObZ2P7CHdV0DqhPiXdw6URAioaSf10mYkPw==
+
 react-loadable@^5.5.0:
   version "5.5.0"
   resolved "https://registry.yarnpkg.com/react-loadable/-/react-loadable-5.5.0.tgz#582251679d3da86c32aae2c8e689c59f1196d8c4"
@@ -13533,6 +13538,11 @@ webpack-nicelog@^2.3.1:
     react-dev-utils "^5.0.1"
     webpackbar "^2.6.1"
 
+webpack-node-externals@^1.7.2:
+  version "1.7.2"
+  resolved "https://registry.yarnpkg.com/webpack-node-externals/-/webpack-node-externals-1.7.2.tgz#6e1ee79ac67c070402ba700ef033a9b8d52ac4e3"
+  integrity sha512-ajerHZ+BJKeCLviLUUmnyd5B4RavLF76uv3cs6KNuO8W+HuQaEs0y0L7o40NQxdPy5w0pcv8Ew7yPUAQG0UdCg==
+
 webpack-sources@^0.2.0:
   version "0.2.3"
   resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-0.2.3.tgz#17c62bfaf13c707f9d02c479e0dcdde8380697fb"
@@ -13549,12 +13559,7 @@ webpack-sources@^1.1.0, webpack-sources@^1.3.0:
     source-list-map "^2.0.0"
     source-map "~0.6.1"
 
-webpack-stats-plugin@^0.2.1:
+webpack@^4.29.6:
-  version "0.2.1"
-  resolved "https://registry.yarnpkg.com/webpack-stats-plugin/-/webpack-stats-plugin-0.2.1.tgz#1f5bac13fc25d62cbb5fd0ff646757dc802b8595"
-  integrity sha512-OYMZLpZrK/qLA79NE4kC4DCt85h/5ipvWJcsefKe9MMw0qU4/ck/IJg+4OmWA+5EfrZZpHXDq92IptfYDWVfkw==
-
-webpack@^4.26.0:
   version "4.29.6"
   resolved "https://registry.yarnpkg.com/webpack/-/webpack-4.29.6.tgz#66bf0ec8beee4d469f8b598d3988ff9d8d90e955"
   integrity sha512-MwBwpiE1BQpMDkbnUUaW6K8RFZjljJHArC6tWQJoFm0oQtfoSebtg4Y7/QHnJ/SddtjYLHaKGX64CFjG5rehJw==