From e9b6d7160636a3e018f65556991b6cf05e8916a5 Mon Sep 17 00:00:00 2001 From: William Blythe Date: Sat, 22 Dec 2018 07:48:35 +1100 Subject: [PATCH] dynamically import pages, should make things a bit faster --- package.json | 1 + src/app/Coriolis.jsx | 120 +++++++++++++++++++++++++++-------------- webpack.config.dev.js | 13 ++--- webpack.config.prod.js | 19 ++++--- 4 files changed, 101 insertions(+), 52 deletions(-) diff --git a/package.json b/package.json index 28dbe455..a507a9ff 100644 --- a/package.json +++ b/package.json @@ -120,6 +120,7 @@ "webpack-notifier": "^1.6.0", "workbox-webpack-plugin": "^3.6.1" }, + "sideEffects": false, "dependencies": { "@babel/polyfill": "^7.0.0", "browserify-zlib-next": "^1.0.1", diff --git a/src/app/Coriolis.jsx b/src/app/Coriolis.jsx index 0595b41c..d812497f 100644 --- a/src/app/Coriolis.jsx +++ b/src/app/Coriolis.jsx @@ -1,7 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import Router from './Router'; -import { register } from 'register-service-worker' +import { register } from 'register-service-worker'; import { EventEmitter } from 'fbemitter'; import { getLanguage } from './i18n/Language'; import Persist from './stores/Persist'; @@ -15,11 +15,7 @@ import ModalImport from './components/ModalImport'; import ModalPermalink from './components/ModalPermalink'; import * as CompanionApiUtils from './utils/CompanionApiUtils'; import * as JournalUtils from './utils/JournalUtils'; -import AboutPage from './pages/AboutPage'; import NotFoundPage from './pages/NotFoundPage'; -import OutfittingPage from './pages/OutfittingPage'; -import ComparisonPage from './pages/ComparisonPage'; -import ShipyardPage from './pages/ShipyardPage'; import ErrorDetails from './pages/ErrorDetails'; const zlib = require('pako'); @@ -72,17 +68,57 @@ export default class Coriolis extends React.Component { route: {}, sizeRatio: Persist.getSizeRatio() }; - this._getAnnouncements() - Router('', (r) => this._setPage(ShipyardPage, r)); + this._getAnnouncements(); + Router('', (r) => { + return import(/* webpackChunkName: "shipyard" */ './pages/ShipyardPage') + .then(ShipyardPage => { + return this._setPage(ShipyardPage.default, r); + }) + }); Router('/import?', (r) => this._importBuild(r)); Router('/import/:data', (r) => this._importBuild(r)); - Router('/outfit/?', (r) => this._setPage(OutfittingPage, r)); - Router('/outfit/:ship/?', (r) => this._setPage(OutfittingPage, r)); - Router('/outfit/:ship/:code?', (r) => this._setPage(OutfittingPage, r)); - Router('/compare/:name?', (r) => this._setPage(ComparisonPage, r)); - Router('/comparison?', (r) => this._setPage(ComparisonPage, r)); - Router('/comparison/:code', (r) => this._setPage(ComparisonPage, r)); - Router('/about', (r) => this._setPage(AboutPage, r)); + Router('/outfit/?', (r) => { + return import(/* webpackChunkName: "outfit" */ './pages/OutfittingPage') + .then(OutfittingPage => { + return this._setPage(OutfittingPage.default, r); + }) + }); + Router('/outfit/:ship/?', (r) => { + return import(/* webpackChunkName: "outfit" */ './pages/OutfittingPage') + .then(OutfittingPage => { + return this._setPage(OutfittingPage.default, r); + }) + }); + Router('/outfit/:ship/:code?', (r) => { + return import(/* webpackChunkName: "outfit" */ './pages/OutfittingPage') + .then(OutfittingPage => { + return this._setPage(OutfittingPage.default, r); + }) + }); + Router('/compare/:name?', (r) => { + return import(/* webpackChunkName: "compare" */ './pages/ComparisonPage') + .then(ComparisonPage => { + return this._setPage(ComparisonPage.default, r); + }) + }); + Router('/comparison?', (r) => { + return import(/* webpackChunkName: "compare" */ './pages/ComparisonPage') + .then(ComparisonPage => { + return this._setPage(ComparisonPage.default, r); + }) + }); + Router('/comparison/:code', (r) => { + return import(/* webpackChunkName: "compare" */ './pages/ComparisonPage') + .then(ComparisonPage => { + return this._setPage(ComparisonPage.default, r); + }) + }); + Router('/about', (r) => { + return import(/* webpackChunkName: "about" */ './pages/AboutPage') + .then(AboutPage => { + return this._setPage(AboutPage.default, r); + }) + }); Router('*', (r) => this._setPage(null, r)); } @@ -105,7 +141,10 @@ export default class Coriolis extends React.Component { } r.params.ship = ship.id; r.params.code = ship.toString(); - this._setPage(OutfittingPage, r); + return import(/* webpackChunkName: "outfit" */ './pages/OutfittingPage') + .then(AboutPage => { + return this._setPage(AboutPage.default, r); + }) } catch (err) { this._onError('Failed to import ship', r.path, 0, 0, err); } @@ -113,10 +152,10 @@ export default class Coriolis extends React.Component { _getAnnouncements() { return request.get('https://orbis.zone/api/announcement') - .query({showInCoriolis: true}) - .then(announces => { - this.setState({ announcements: announces.body }) - }) + .query({ showInCoriolis: true }) + .then(announces => { + this.setState({ announcements: announces.body }); + }); } /** @@ -351,27 +390,27 @@ export default class Coriolis extends React.Component { const self = this; if (process.env.NODE_ENV === 'production') { register('/service-worker.js', { - ready (registration) { - console.log('Service worker is active.') + ready(registration) { + console.log('Service worker is active.'); }, - registered (registration) { - console.log('Service worker has been registered.') + registered(registration) { + console.log('Service worker has been registered.'); }, - cached (registration) { - console.log('Content has been cached for offline use.') + cached(registration) { + console.log('Content has been cached for offline use.'); }, - updatefound (registration) { - console.log('New content is downloading.') + updatefound(registration) { + console.log('New content is downloading.'); }, - updated (registration) { + updated(registration) { self.setState({ appCacheUpdate: true }); - console.log('New content is available; please refresh.') + console.log('New content is available; please refresh.'); }, - offline () { - console.log('No internet connection found. App is running in offline mode.') + offline() { + console.log('No internet connection found. App is running in offline mode.'); }, - error (error) { - console.error('Error during service worker registration:', error) + error(error) { + console.error('Error during service worker registration:', error); } }); } @@ -394,21 +433,24 @@ export default class Coriolis extends React.Component { let currentMenu = this.state.currentMenu; return
-
-
{this.state.announcements.map(a => )}
+ className={this.state.noTouch ? 'no-touch' : null}> +
+
{this.state.announcements.map(a => )}
{this.state.error ? this.state.error : this.state.page ? React.createElement(this.state.page, { currentMenu }) : - } + } {this.state.modal} {this.state.tooltip} diff --git a/webpack.config.dev.js b/webpack.config.dev.js index ff4bc29b..44b8a02b 100644 --- a/webpack.config.dev.js +++ b/webpack.config.dev.js @@ -14,7 +14,7 @@ module.exports = { }, mode: 'development', entry: { - main: './src/app/index.js' + main: './src/app/index.js', }, resolve: { // When requiring, you don't need to add these extensions @@ -22,13 +22,11 @@ module.exports = { }, optimization: { minimize: false, - splitChunks: { - chunks: 'all' - } + usedExports: true }, output: { path: path.join(__dirname, 'build'), - filename: 'app.js', + chunkFilename: '[name].bundle.js', publicPath: '/' }, plugins: [ @@ -56,7 +54,10 @@ module.exports = { module: { rules: [ { test: /\.css$/, loader: ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader' }) }, - { test: /\.less$/, loader: ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader!less-loader' }) }, + { + test: /\.less$/, + loader: ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader!less-loader' }) + }, { test: /\.(js|jsx)$/, loaders: ['babel-loader'], include: path.join(__dirname, 'src') }, { test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, loader: 'url-loader?limit=10000&mimetype=application/font-woff' }, { test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, loader: 'url-loader?limit=10000&mimetype=application/font-woff' }, diff --git a/webpack.config.prod.js b/webpack.config.prod.js index 55fb4b63..8589ff5e 100644 --- a/webpack.config.prod.js +++ b/webpack.config.prod.js @@ -11,26 +11,28 @@ const buildDate = new Date(); module.exports = { devtool: 'source-map', entry: { - main: ['./src/app/index.js'] + main: './src/app/index.js' }, resolve: { extensions: ['.js', '.jsx', '.json', '.less'] }, output: { path: path.join(__dirname, 'build'), - filename: '[name].[hash].js', + chunkFilename: '[name].bundle.js', publicPath: '/', globalObject: 'this' }, mode: 'production', optimization: { minimize: true, - splitChunks: { - chunks: 'all' - } + usedExports: true }, plugins: [ - new CopyWebpackPlugin(['src/.htaccess', { from: 'src/schemas', to: 'schemas' }, {from: 'src/images/logo/*', flatten: true, to: ''}, 'src/iframe.html', 'src/xdLocalStoragePostMessageApi.min.js']), + new CopyWebpackPlugin(['src/.htaccess', { from: 'src/schemas', to: 'schemas' }, { + from: 'src/images/logo/*', + flatten: true, + to: '' + }, 'src/iframe.html', 'src/xdLocalStoragePostMessageApi.min.js']), // new webpack.optimize.CommonsChunkPlugin({ // name: 'lib', // filename: 'lib.[chunkhash:6].js' @@ -66,7 +68,10 @@ module.exports = { module: { rules: [ { test: /\.css$/, loader: ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader' }) }, - { test: /\.less$/, loader: ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader!less-loader' }) }, + { + test: /\.less$/, + loader: ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader!less-loader' }) + }, { test: /\.(js|jsx)$/, loader: 'babel-loader?cacheDirectory=true', include: path.join(__dirname, 'src') }, { test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, loader: 'url-loader?limit=10000&mimetype=application/font-woff' }, { test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, loader: 'url-loader?limit=10000&mimetype=application/font-woff' },