From dffae067ab2998c6b7f22cf9908142e38cd54219 Mon Sep 17 00:00:00 2001 From: Kayne Ruse Date: Mon, 27 May 2019 01:39:13 +1000 Subject: [PATCH] Testing minimizing and code splitting --- package-lock.json | 16 ++++++++++++++++ package.json | 2 ++ server/index.js | 6 +++--- src/components/app.jsx | 43 +++++++++++++++++++++--------------------- webpack.config.js | 17 ++++++++++++++++- 5 files changed, 58 insertions(+), 26 deletions(-) diff --git a/package-lock.json b/package-lock.json index b0cdc35..28220ee 100644 --- a/package-lock.json +++ b/package-lock.json @@ -370,6 +370,14 @@ "@babel/helper-plugin-utils": "^7.0.0" } }, + "@babel/plugin-syntax-dynamic-import": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-dynamic-import/-/plugin-syntax-dynamic-import-7.2.0.tgz", + "integrity": "sha512-mVxuJ0YroI/h/tbFTPGZR8cv6ai+STMKNBq0f8hFxsxWjl94qqhsb+wXbpNMDPU3cfR1TIsVFzU3nXyZMqyK4w==", + "requires": { + "@babel/helper-plugin-utils": "^7.0.0" + } + }, "@babel/plugin-syntax-json-strings": { "version": "7.2.0", "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-json-strings/-/plugin-syntax-json-strings-7.2.0.tgz", @@ -5685,6 +5693,14 @@ "react-base16-styling": "^0.5.1" } }, + "react-loadable": { + "version": "5.5.0", + "resolved": "https://registry.npmjs.org/react-loadable/-/react-loadable-5.5.0.tgz", + "integrity": "sha512-C8Aui0ZpMd4KokxRdVAm2bQtI03k2RMRNzOB+IipV3yxFTSVICv7WoUr5L9ALB5BmKO1iHgZtWM8EvYG83otdg==", + "requires": { + "prop-types": "^15.5.0" + } + }, "react-markdown": { "version": "4.0.8", "resolved": "https://registry.npmjs.org/react-markdown/-/react-markdown-4.0.8.tgz", diff --git a/package.json b/package.json index dad645e..4e8d919 100644 --- a/package.json +++ b/package.json @@ -15,6 +15,7 @@ "license": "", "dependencies": { "@babel/core": "^7.4.4", + "@babel/plugin-syntax-dynamic-import": "^7.2.0", "@babel/preset-env": "^7.4.4", "@babel/preset-react": "^7.0.0", "babel-loader": "^8.0.5", @@ -29,6 +30,7 @@ "query-string": "^6.5.0", "react": "^16.8.6", "react-dom": "^16.8.6", + "react-loadable": "^5.5.0", "react-markdown": "^4.0.8", "react-redux": "^7.0.3", "react-router": "^5.0.0", diff --git a/server/index.js b/server/index.js index 2a5e1ef..2e9f906 100644 --- a/server/index.js +++ b/server/index.js @@ -44,9 +44,9 @@ profiles.runGoldTick(connection); app.use('/styles', express.static(path.resolve(__dirname + '/../public/styles')) ); app.use('/img', express.static(path.resolve(__dirname + '/../public/img')) ); -//the app file -app.get('/app.bundle.js', (req, res) => { - res.sendFile(path.resolve(__dirname + '/../public/app.bundle.js')); +//the app file(s) +app.get('/*app.bundle.js', (req, res) => { + res.sendFile(path.resolve(`${__dirname}/../public/${req.originalUrl}`)); }); //fallback diff --git a/src/components/app.jsx b/src/components/app.jsx index 2d33ec5..133a941 100644 --- a/src/components/app.jsx +++ b/src/components/app.jsx @@ -1,22 +1,21 @@ import React from 'react'; import { BrowserRouter, Switch, Route } from 'react-router-dom'; - -//include pages -import Home from './pages/home.jsx'; -import Signup from './pages/signup.jsx'; -import Login from './pages/login.jsx'; -import PasswordChange from './pages/password_change.jsx'; -import PasswordRecover from './pages/password_recover.jsx'; -import PasswordReset from './pages/password_reset.jsx'; - -import Profile from './pages/profile.jsx'; -import Ladder from './pages/ladder.jsx'; - -import PageNotFound from './pages/page_not_found.jsx'; +import Loadable from 'react-loadable'; //other stuff import Footer from './panels/footer.jsx'; +//lazy route loading +const LazyRoute = (props) => { + const component = Loadable({ + loader: props.component, + loading: () =>
Loading...
, + }); + + return ; +}; + +//the app class export default class App extends React.Component { constructor(props) { super(props); @@ -29,17 +28,17 @@ export default class App extends React.Component { - - - - - - + import('./pages/home.jsx')} /> + import('./pages/signup.jsx')} /> + import('./pages/login.jsx')} /> + import('./pages/password_change.jsx')} /> + import('./pages/password_recover.jsx')} /> + import('./pages/password_reset.jsx')} /> - - + import('./pages/profile.jsx')} /> + import('./pages/ladder.jsx')} /> - + import('./pages/page_not_found.jsx')} />