mrsharpoblunto

<!-- preloaded async route bundles -->
<link rel="preload" href="SomeConsumerRoute.js" as="script" />
<link rel="preload" href="..." as="script" />
...
<!-- critical path scripts to load the initial page -->
<script src="Common.js" type="text/javascript"></script>
<script src="Consumer.js" type="text/javascript"></script>

mrsharpoblunto

<!-- preloaded critical path scripts -->
<link rel="preload" href="Common.js" as="script" />
<link rel="preload" href="Consumer.js" as="script" />
<!-- preloaded async route bundles -->
<link rel="preload" href="SomeConsumerRoute.js" as="script" />
...
<!-- critical path scripts to load the initial page -->
<script src="Common.js" type="text/javascript"></script>
<script src="Consumer.js" type="text/javascript"></script>
<script src="SomeConsumerRoute.js" type="text/javascript" async></script>

mrsharpoblunto

<script type="text/javascript">
  // the server will write out the paths of any API calls it plans to 
  // run server-side so the client knows to wait for the server, rather
  // than doing its own XHR request for the data
  window.__data = {
    '/my/api/path': {
        waiting: [],
    }
  };

mrsharpoblunto

<script type="text/javascript">
  window.__dataLoaded('/my/api/path', {
    // API json response, wrapped in the function call to 
    // add it to the JSON cache...
  });
</script>

mrsharpoblunto

function queryAPI(path) {
  const cacheEntry = window.__data[path];
  if (!cacheEntry) {
    // issue a normal XHR API request
    return fetch(path);
  } else if (cacheEntry.data) {
    // the server has pushed us the data already
    return Promise.resolve(cacheEntry.data);
  } else {
    // the server is still pushing the data

mrsharpoblunto

function stagingAction(
    key: string,
    promise: Promise<Action>,
): AsyncAction<State, Action>

function stagingCommit(key: string): AsyncAction<State, Action>

mrsharpoblunto

function fetchAndStageFeed() {
    return stagingAction(
        'feed',
        (async () => {
            const {data} = await fetchFeedTimeline();
            return {
                type: FEED_LOADED,
                ...data,
            };
        })(),

mrsharpoblunto

const config = {
  transformer: {
    getTransformOptions: () => {
      return {
        transform: { inlineRequires: true },
      };
    },
  },
};

mrsharpoblunto

const foo = require('foo');
const bar = require('bar');

module.exports = function baz() {
    foo();
}

mrsharpoblunto

module.exports = function baz() {
    require('foo')();
}