dynamically import pages, should make things a bit faster

2025-12-08 22:33:24 +00:00 · 2018-12-22 07:48:35 +11:00
parent e03e249d2f
commit e9b6d71606
4 changed files with 101 additions and 52 deletions
--- 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",
--- 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);
    }
@@ -115,8 +154,8 @@ export default class Coriolis extends React.Component {
    return request.get('https://orbis.zone/api/announcement')
      .query({ showInCoriolis: true })
      .then(announces => {
-      this.setState({ announcements: announces.body })
-    })
+        this.setState({ announcements: announces.body });
+      });
  }

  /**
@@ -352,26 +391,26 @@ export default class Coriolis extends React.Component {
      if (process.env.NODE_ENV === 'production') {
        register('/service-worker.js', {
          ready(registration) {
-            console.log('Service worker is active.')
+            console.log('Service worker is active.');
          },
          registered(registration) {
-            console.log('Service worker has been registered.')
+            console.log('Service worker has been registered.');
          },
          cached(registration) {
-            console.log('Content has been cached for offline use.')
+            console.log('Content has been cached for offline use.');
          },
          updatefound(registration) {
-            console.log('New content is downloading.')
+            console.log('New content is downloading.');
          },
          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.')
+            console.log('No internet connection found. App is running in offline mode.');
          },
          error(error) {
-            console.error('Error during service worker registration:', error)
+            console.error('Error during service worker registration:', error);
          }
        });
      }
@@ -395,8 +434,10 @@ export default class Coriolis extends React.Component {

    return <div style={{ minHeight: '100%' }} onClick={this._closeMenu}
                className={this.state.noTouch ? 'no-touch' : null}>
-      <Header announcements={this.state.announcements} appCacheUpdate={this.state.appCacheUpdate} currentMenu={currentMenu} />
-      <div className="announcement-container">{this.state.announcements.map(a => <Announcement text={a.message}/>)}</div>
+      <Header announcements={this.state.announcements} appCacheUpdate={this.state.appCacheUpdate}
+              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/>}
      {this.state.modal}
@@ -408,7 +449,8 @@ export default class Coriolis extends React.Component {
          <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>
--- 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' },
--- 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' },