Code splitting vendor bundles

gistfile1.txt

let reactRoot = document.getElementById('app-root');

const loadStart = new Date();
import('./core_module').then(function(core_module) {
    const coreDate = new Date();
    const coreMS = coreDate.getTime() - loadStart.getTime();
    const header = document.getElementById('message-header');
    header.textContent = `CORE LOADED (${coreMS})`;
    const {ReactDOM, React} = core_module;
    ReactDOM.render(<h2>RenderedByReact</h2>, reactRoot);
    import('./mainui_module').then(function(main_module) {  // eslint-disable-line no-unused-vars
        const mainDate = new Date();
        const mainMS = mainDate.getTime() - coreDate.getTime();
        ReactDOM.render(<h2>{`MAIN UI LOADED (${mainMS})`}</h2>, reactRoot);
        import('./root_module').then(function(root_module) {
            const rootDate = new Date();
            const rootMS = rootDate.getTime() - mainDate.getTime();
            const totalMS = rootDate.getTime() - loadStart.getTime();
            const {mainUI} = root_module;
            const stats = [
                `loadStart: ${loadStart}`,
                `coreMS: ${coreMS}`,
                `mainMS: ${mainMS}`,
                `rootMS: ${rootMS}`,
                `totalMS: ${totalMS}`
            ];
            mainUI(reactRoot, stats);
        });
    });
});

// Module files look like:

// core_module.js
/* eslint-disable no-unused-vars */
'use strict';

import React from 'react';
import ReactDOM from 'react-dom';
import redux from 'redux';
import reduxSaga from 'redux-saga';
import socketIO from 'socket.io-client';
import babelPolyfill from 'babel-polyfill';

export {React, ReactDOM, redux, reduxSaga, socketIO, babelPolyfill};

// manui_module.js
/** @flow */
'use strict';

import injectTapEventPlugin from 'react-tap-event-plugin';
import materialUI from 'material-ui';

export {injectTapEventPlugin, materialUI};
Contact GitHub API Training Shop Blog About