From 657238700f6fecde598a41acc85d6098886c76bc Mon Sep 17 00:00:00 2001 From: jero Date: Tue, 28 May 2019 00:36:07 +0300 Subject: [PATCH] feat(*): install @loadable for code splitting and server-side rendering use ChunkExtractor for server's render function --- .babelrc | 1 + config/webpack-config/plugins.js | 6 +++++- package.json | 4 ++++ src/app/routing/Routing.js | 6 +++++- src/server/render.js | 17 +++++++++++----- yarn.lock | 33 ++++++++++++++++++++++++++++++-- 6 files changed, 58 insertions(+), 9 deletions(-) diff --git a/.babelrc b/.babelrc index c573851b..8a32ecd0 100644 --- 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 index 813c419e..00e51f7f 100644 --- 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 index f87fb91d..05f9405b 100644 --- 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 index e16ec80d..e45954f5 100755 --- 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 = () => (
...
); diff --git a/src/server/render.js b/src/server/render.js index e68c8ae2..5802c907 100644 --- 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) => Array; 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 */ - ); + )); const css = getAssetPath(['bundle.css', 'vendor.css']); const scripts = getAssetPath(['bundle.js', 'vendor.js']); - + return res.send( '' + renderToString( {content} diff --git a/yarn.lock b/yarn.lock index 68ec55fa..754301e0 100644 --- a/yarn.lock +++ b/yarn.lock @@ -380,7 +380,7 @@ dependencies: "@babel/helper-plugin-utils" "^7.0.0" -"@babel/plugin-syntax-dynamic-import@7.2.0": +"@babel/plugin-syntax-dynamic-import@7.2.0", "@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/runtime@7.4.5": +"@babel/runtime@7.4.5", "@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/babel-plugin@5.10.0": + 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/component@5.10.1": + 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/server@5.9.0": + 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/webpack-plugin@5.7.1": + 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"