feat(*): install @Loadable for code splitting and server-side rendering

use ChunkExtractor for server's render function
aneurysmjs · May 27, 2019 · 6572387 · 6572387
1 parent 5225d0b
commit 6572387
Show file tree

Hide file tree

Showing 6 changed files with 58 additions and 9 deletions.
diff --git a/.babelrc b/.babelrc
@@ -13,6 +13,7 @@
     }
   },
   "plugins": [
+    "@loadable/babel-plugin",
     "dynamic-import-node",
     "@babel/plugin-proposal-class-properties",
     "@babel/plugin-proposal-object-rest-spread",

diff --git a/config/webpack-config/plugins.js b/config/webpack-config/plugins.js
@@ -2,10 +2,13 @@ const webpack = require('webpack');
 const ManifestPlugin = require('webpack-manifest-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
+const LoadablePlugin = require('@loadable/webpack-plugin');
 
 const env = require('../env')();
 
-const shared = [];
+const shared = [
+
+];
 
 const client = [
   new CaseSensitivePathsPlugin(),
@@ -24,6 +27,7 @@ const client = [
 ];
 
 const server = [
+  new LoadablePlugin(),
   new webpack.DefinePlugin({
     __SERVER__: 'true',
     __CLIENT__: 'false',

diff --git a/package.json b/package.json
@@ -49,6 +49,8 @@
     "@babel/preset-react": "7.0.0",
     "@babel/register": "7.4.4",
     "@babel/runtime": "7.4.5",
+    "@loadable/babel-plugin": "5.10.0",
+    "@loadable/webpack-plugin": "5.7.1",
     "autoprefixer": "9.5.1",
     "babel-core": "7.0.0-bridge.0",
     "babel-eslint": "10.0.1",
@@ -124,6 +126,8 @@
     "write-file-webpack-plugin": "4.5.0"
   },
   "dependencies": {
+    "@loadable/component": "5.10.1",
+    "@loadable/server": "5.9.0",
     "axios": "0.18.0",
     "bootstrap": "4.3.1",
     "font-awesome": "4.7.0",

diff --git a/src/app/routing/Routing.js b/src/app/routing/Routing.js
@@ -5,8 +5,12 @@ import {
 } from 'react-router-dom';
 
 import Layout from '@/components/core/Layout/Layout';
+// $FlowIgnoreMe
+import loadable from '@loadable/component';
 
-import Home from '@/pages/Home/Home';
+const Home = loadable(() => import(/* webpackChunkName: "Home" */'@/pages/Home/Home'));
+
+// import Home from '@/pages/Home/Home';
 
 // const Loading = () => (<div>...</div>);
 

diff --git a/src/server/render.js b/src/server/render.js
@@ -9,10 +9,17 @@ import type {
   $Response,
   Middleware,
 } from 'express';
-import App from '@/App';
+// $FlowIgnore
+import { ChunkExtractor } from '@loadable/server';
 
+import App from '@/App';
+// $FlowIgnore
+import paths from '../../config/paths';
 import Html from './components/HTML';
 
+const statsFile = `${paths.serverBuild}/loadable-stats.json`;
+const extractor = new ChunkExtractor({ statsFile, entrypoints: ['server'] });
+
 type GetAssetsType = ((string) => string) => (Array<string>) => Array<string>;
 
 const getAssets: GetAssetsType = (fn) => (assets) => assets.map(fn);
@@ -24,24 +31,24 @@ const serverRenderer = (): Middleware => (req: $Request, res: $Response): $Respo
   // $FlowIgnoreMe
   const getAssetPath = getAssets(assetPath);
 
-  const content = renderToString(
+  const content = renderToString(extractor.collectChunks(
     /* $FlowIgnoreMe */
     <Provider store={req.store}>
       <Router location={req.url} context={{}}>
         <App />
       </Router>
     </Provider>
-  );
+  ));
 
   const css = getAssetPath(['bundle.css', 'vendor.css']);
   const scripts = getAssetPath(['bundle.js', 'vendor.js']);
-
+  
   return res.send(
     '<!doctype html>' +
     renderToString(
       <Html
         css={css}
-        scripts={scripts}
+        scripts={[...scripts]}
       >
         {content}
       </Html>

diff --git a/yarn.lock b/yarn.lock
@@ -380,7 +380,7 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
-"@babel/[email protected]":
+"@babel/[email protected]", "@babel/plugin-syntax-dynamic-import@^7.2.0":
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-dynamic-import/-/plugin-syntax-dynamic-import-7.2.0.tgz#69c159ffaf4998122161ad8ebc5e6d1f55df8612"
   dependencies:
@@ -783,7 +783,7 @@
     pirates "^4.0.0"
     source-map-support "^0.5.9"
 
-"@babel/[email protected]":
+"@babel/[email protected]", "@babel/runtime@^7.4.4":
   version "7.4.5"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.4.5.tgz#582bb531f5f9dc67d2fcb682979894f75e253f12"
   integrity sha512-TuI4qpWZP6lGOGIuGWtp9sPluqYICmbk8T/1vpSysqJxRPkudh/ofFWyqdcMsDf2s7KvDL4/YHgKyvcS3g9CJQ==
@@ -1086,6 +1086,35 @@
     "@types/istanbul-reports" "^1.1.1"
     "@types/yargs" "^12.0.9"
 
+"@loadable/[email protected]":
+  version "5.10.0"
+  resolved "https://registry.yarnpkg.com/@loadable/babel-plugin/-/babel-plugin-5.10.0.tgz#9d2b83649c910404214ae0da4c4a84a2a3f583ed"
+  integrity sha512-6hbsDIuHSjgATLK7m/Y7WwZ1t6vmZ22AYTtYsjK5L17KxiPm9v1hvUoheLs3jnDFUTHS6mgzD8vliZJdfsLLQA==
+  dependencies:
+    "@babel/plugin-syntax-dynamic-import" "^7.2.0"
+
+"@loadable/[email protected]":
+  version "5.10.1"
+  resolved "https://registry.yarnpkg.com/@loadable/component/-/component-5.10.1.tgz#09613e46d409ffacb3b4403658ed90adbc01ba24"
+  integrity sha512-nYb38UbPWCWB9R8US4Za0JzgjS1QaY13STJhU7ZUsfO2qG3k5huppVF92eX2iauhfpdrRkCDQqi+Fg/US4FXIg==
+  dependencies:
+    "@babel/runtime" "^7.4.4"
+    hoist-non-react-statics "^3.3.0"
+
+"@loadable/[email protected]":
+  version "5.9.0"
+  resolved "https://registry.yarnpkg.com/@loadable/server/-/server-5.9.0.tgz#ca40a7d5317a5a211ef9ac2278810c8671fb80f4"
+  integrity sha512-AJv446qSJgMr49HBBECtfhD9JN4AB9SKtWLI+Ri20Awq6HY79a8mnYN5aFmSq2g5rdp7mhXLm6A9cstbz5LDow==
+  dependencies:
+    lodash "^4.17.11"
+
+"@loadable/[email protected]":
+  version "5.7.1"
+  resolved "https://registry.yarnpkg.com/@loadable/webpack-plugin/-/webpack-plugin-5.7.1.tgz#9fe4b19c347eaa72f8ff366ae9a9d2b724f86124"
+  integrity sha512-tURNYwPUahbM4Miz/mwMD+PZGnMpknRukwt4RViVX6tYOt06a5U92xJTv7t54C4tHdtCIEOmDrqCo97sfIu4mg==
+  dependencies:
+    mkdirp "^0.5.1"
+
 "@mrmlnc/readdir-enhanced@^2.2.1":
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz#524af240d1a360527b730475ecfa1344aa540dde"