dynamically import pages, should make things a bit faster

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",

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()
+    this._getAnnouncements();
-    Router('', (r) => this._setPage(ShipyardPage, r));
+    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/?', (r) => {
-    Router('/outfit/:ship/?', (r) => this._setPage(OutfittingPage, r));
+      return import(/* webpackChunkName: "outfit" */ './pages/OutfittingPage')
-    Router('/outfit/:ship/:code?', (r) => this._setPage(OutfittingPage, r));
+        .then(OutfittingPage => {
-    Router('/compare/:name?', (r) => this._setPage(ComparisonPage, r));
+          return this._setPage(OutfittingPage.default, 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/: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})
+      .query({ showInCoriolis: true })
-    .then(announces => {
+      .then(announces => {
-      this.setState({ announcements: announces.body })
+        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) {
+          ready(registration) {
-            console.log('Service worker is active.')
+            console.log('Service worker is active.');
           },
-          registered (registration) {
+          registered(registration) {
-            console.log('Service worker has been registered.')
+            console.log('Service worker has been registered.');
           },
-          cached (registration) {
+          cached(registration) {
-            console.log('Content has been cached for offline use.')
+            console.log('Content has been cached for offline use.');
           },
-          updatefound (registration) {
+          updatefound(registration) {
-            console.log('New content is downloading.')
+            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 () {
+          offline() {
-            console.log('No internet connection found. App is running in offline mode.')
+            console.log('No internet connection found. App is running in offline mode.');
           },
-          error (error) {
+          error(error) {
-            console.error('Error during service worker registration:', 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 <div style={{ minHeight: '100%' }} onClick={this._closeMenu}
-      className={this.state.noTouch ? 'no-touch' : null}>
+                className={this.state.noTouch ? 'no-touch' : null}>
-      <Header announcements={this.state.announcements} appCacheUpdate={this.state.appCacheUpdate} currentMenu={currentMenu} />
+      <Header announcements={this.state.announcements} appCacheUpdate={this.state.appCacheUpdate}
-      <div className="announcement-container">{this.state.announcements.map(a => <Announcement text={a.message}/>)}</div>
+              currentMenu={currentMenu}/>
+      <div className="announcement-container">{this.state.announcements.map(a => <Announcement
+        text={a.message}/>)}</div>
       {this.state.error ? this.state.error : this.state.page ? React.createElement(this.state.page, { currentMenu }) :
-        <NotFoundPage />}
+        <NotFoundPage/>}
       {this.state.modal}
       {this.state.tooltip}
       <footer>
         <div className="right cap">
           <a href="https://github.com/EDCD/coriolis" target="_blank" rel="noopener noreferrer"
-            title="Coriolis Github Project">{window.CORIOLIS_VERSION} - {window.CORIOLIS_DATE}</a>
+             title="Coriolis Github Project">{window.CORIOLIS_VERSION} - {window.CORIOLIS_DATE}</a>
           <br/>
           <a
             href={'https://github.com/EDCD/coriolis/compare/edcd:develop@{' + window.CORIOLIS_DATE + '}...edcd:develop'}
-            target="_blank" rel="noopener noreferrer" title={'Coriolis Commits since' + window.CORIOLIS_DATE}>Commits since last release
+            target="_blank" rel="noopener noreferrer" title={'Coriolis Commits since' + window.CORIOLIS_DATE}>Commits
+            since last release
             ({window.CORIOLIS_DATE})</a>
         </div>
       </footer>

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: {
+    usedExports: true
-      chunks: 'all'
-    }
   },
   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' },

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: {
+    usedExports: true
-      chunks: 'all'
-    }
   },
   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' },