Prioritize the module loader script with link headers

index.js

@@ -11,6 +11,7 @@ const filterReqHeadersFn = require('./lib/filter-headers');
 const PIPE_DEFINITION = fs.readFileSync(
     path.resolve(__dirname, 'src/pipe.min.js')
 );
+const { getCrossOrigin } = require('./lib/utils');
 const AMD_LOADER_URL =
     'https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.22/require.min.js';
 
@@ -38,7 +39,7 @@ module.exports = class Tailor extends EventEmitter {
             : Math.max(1, maxAssetLinks);
 
         let memoizedDefinition;
-        const pipeChunk = (amdLoaderUrl, pipeInstanceName) => {
+        const pipeChunk = (pipeInstanceName, { host } = {}) => {
             if (!memoizedDefinition) {
                 // Allow reading from fs for inlining AMD
                 if (amdLoaderUrl.startsWith('file://')) {
@@ -48,7 +49,10 @@ module.exports = class Tailor extends EventEmitter {
                     );
                     memoizedDefinition = `<script>${fileData}\n`;
                 } else {
-                    memoizedDefinition = `<script src="${amdLoaderUrl}"></script>\n<script>`;
+                    memoizedDefinition = `<script src="${AMD_LOADER_URL}" ${getCrossOrigin(
+                        amdLoaderUrl,
+                        host
+                    )}></script>\n<script>`;
                 }
             }
             return Buffer.from(
@@ -58,6 +62,7 @@ module.exports = class Tailor extends EventEmitter {
 
         const requestOptions = Object.assign(
             {
+                amdLoaderUrl,
                 fetchContext: () => Promise.resolve({}),
                 fetchTemplate: fetchTemplate(
                     templatesPath || path.join(process.cwd(), 'templates')
@@ -67,7 +72,7 @@ module.exports = class Tailor extends EventEmitter {
                 handleTag: () => '',
                 requestFragment: requestFragment(filterRequestHeaders),
                 pipeInstanceName: 'Pipe',
-                pipeDefinition: pipeChunk.bind(null, amdLoaderUrl),
+                pipeDefinition: pipeChunk,
                 pipeAttributes: getPipeAttributes
             },
             options

lib/process-template.js

@@ -52,7 +52,7 @@ module.exports = function processTemplate(request, options, context) {
         };
 
         if (placeholder === 'pipe') {
-            return pipeDefinition(pipeInstanceName);
+            return pipeDefinition(pipeInstanceName, request.headers);
         }
 
         if (placeholder === 'async') {

lib/request-handler.js

@@ -1,7 +1,16 @@
 'use strict';
+
 const AsyncStream = require('./streams/async-stream');
-const LinkHeader = require('http-link-header');
 const ContentLengthStream = require('./streams/content-length-stream');
+const { TEMPLATE_NOT_FOUND } = require('./fetch-template');
+const processTemplate = require('./process-template');
+const {
+    getLoaderScript,
+    getFragmentAssetsToPreload,
+    nextIndexGenerator
+} = require('./utils');
+
+// Events emitted by fragments on the template
 const FRAGMENT_EVENTS = [
     'start',
     'response',
@@ -11,54 +20,6 @@ const FRAGMENT_EVENTS = [
     'fallback',
     'warn'
 ];
-const { TEMPLATE_NOT_FOUND } = require('./fetch-template');
-
-const processTemplate = require('./process-template');
-
-const getCrossOriginHeader = (fragmentUrl, host) => {
-    if (host && fragmentUrl.indexOf(`://${host}`) < 0) {
-        return 'crossorigin';
-    }
-    return '';
-};
-
-// Early preloading of primary fragments assets to improve Performance
-const getAssetsToPreload = ({ link }, { headers = {} }) => {
-    let assetsToPreload = [];
-
-    const { refs = [] } = LinkHeader.parse(link);
-    const scriptRefs = refs
-        .filter(ref => ref.rel === 'fragment-script')
-        .map(ref => ref.uri);
-    const styleRefs = refs
-        .filter(ref => ref.rel === 'stylesheet')
-        .map(ref => ref.uri);
-
-    // Handle Server rendered fragments without depending on assets
-    if (!scriptRefs[0] && !styleRefs[0]) {
-        return '';
-    }
-    styleRefs.forEach(uri => {
-        assetsToPreload.push(`<${uri}>; rel="preload"; as="style"; nopush`);
-    });
-    scriptRefs.forEach(uri => {
-        const crossOrigin = getCrossOriginHeader(uri, headers.host);
-        assetsToPreload.push(
-            `<${uri}>; rel="preload"; as="script"; nopush; ${crossOrigin}`
-        );
-    });
-    return assetsToPreload.join(',');
-};
-
-function nextIndexGenerator(initialIndex, step) {
-    let index = initialIndex;
-
-    return () => {
-        let pastIndex = index;
-        index += step;
-        return pastIndex;
-    };
-}
 
 /**
  * Process the HTTP Request to the Tailor Middleware
@@ -74,7 +35,8 @@ module.exports = function processRequest(options, request, response) {
         fetchTemplate,
         parseTemplate,
         filterResponseHeaders,
-        maxAssetLinks
+        maxAssetLinks,
+        amdLoaderUrl
     } = options;
 
     const asyncStream = new AsyncStream();
@@ -142,12 +104,16 @@ module.exports = function processRequest(options, request, response) {
             }
 
             // Make resources early discoverable while processing HTML
-            const preloadAssets = headers.link
-                ? getAssetsToPreload(headers, request)
-                : '';
-            if (preloadAssets !== '') {
-                responseHeaders.link = preloadAssets;
-            }
+            const assetsToPreload = getFragmentAssetsToPreload(
+                headers,
+                request.headers
+            );
+
+            // Loader script must be preloaded before every fragment asset
+            const loaderScript = getLoaderScript(amdLoaderUrl, request.headers);
+            loaderScript !== '' && assetsToPreload.unshift(loaderScript);
+
+            responseHeaders.link = assetsToPreload.join(',');
             this.emit('response', request, statusCode, responseHeaders);
 
             response.writeHead(statusCode, responseHeaders);
@@ -180,8 +146,10 @@ module.exports = function processRequest(options, request, response) {
                 extendedOptions,
                 context
             );
+            let isFragmentFound = false;
 
             resultStream.on('fragment:found', fragment => {
+                isFragmentFound = true;
                 FRAGMENT_EVENTS.forEach(eventName => {
                     fragment.once(eventName, (...args) => {
                         const prefixedName = 'fragment:' + eventName;
@@ -202,7 +170,18 @@ module.exports = function processRequest(options, request, response) {
                 const statusCode = response.statusCode || 200;
                 if (shouldWriteHead) {
                     shouldWriteHead = false;
+                    // Preload the loader script when atleast
+                    // one fragment is present on the page
+                    if (isFragmentFound) {
+                        const loaderScript = getLoaderScript(
+                            amdLoaderUrl,
+                            request.headers
+                        );
+                        loaderScript !== '' &&
+                            (responseHeaders.link = loaderScript);
+                    }
                     this.emit('response', request, statusCode, responseHeaders);
+
                     response.writeHead(statusCode, responseHeaders);
                     resultStream.pipe(contentLengthStream).pipe(response);
                 }

lib/utils.js

@@ -0,0 +1,96 @@
+'use strict';
+
+const LinkHeader = require('http-link-header');
+
+const getCrossOrigin = (url = '', host = '') => {
+    if (url.includes(`://${host}`)) {
+        return '';
+    }
+    return 'crossorigin';
+};
+
+const getPreloadAttributes = ({
+    assetUrl,
+    host,
+    asAttribute,
+    corsCheck = false,
+    noPush = true // Disable HTTP/2 Push behaviour until digest spec is implemented by most browsers
+}) => {
+    return (
+        assetUrl &&
+        `<${assetUrl}>; rel="preload"; as="${asAttribute}"; ${noPush
+            ? 'nopush;'
+            : ''} ${corsCheck ? getCrossOrigin(assetUrl, host) : ''}`.trim()
+    );
+};
+
+// Module loader script used by tailor for managing dependency between fragments
+const getLoaderScript = (amdLoaderUrl, { host } = {}) => {
+    if (amdLoaderUrl.startsWith('file://')) {
+        return '';
+    }
+
+    return getPreloadAttributes({
+        assetUrl: amdLoaderUrl,
+        asAttribute: 'script',
+        corsCheck: true,
+        host
+    });
+};
+
+// Early preloading of primary fragments assets to improve Performance
+const getFragmentAssetsToPreload = ({ link = '' }, { host } = {}) => {
+    let assetsToPreload = [];
+
+    const { refs = [] } = LinkHeader.parse(link);
+    const scriptRefs = refs
+        .filter(ref => ref.rel === 'fragment-script')
+        .map(ref => ref.uri);
+    const styleRefs = refs
+        .filter(ref => ref.rel === 'stylesheet')
+        .map(ref => ref.uri);
+
+    // Handle Server rendered fragments without depending on assets
+    if (!scriptRefs[0] && !styleRefs[0]) {
+        return assetsToPreload;
+    }
+
+    for (const uri of styleRefs) {
+        assetsToPreload.push(
+            getPreloadAttributes({
+                assetUrl: uri,
+                asAttribute: 'style'
+            })
+        );
+    }
+
+    for (const uri of scriptRefs) {
+        assetsToPreload.push(
+            getPreloadAttributes({
+                assetUrl: uri,
+                asAttribute: 'script',
+                corsCheck: true,
+                host
+            })
+        );
+    }
+
+    return assetsToPreload;
+};
+
+const nextIndexGenerator = (initialIndex, step) => {
+    let index = initialIndex;
+
+    return () => {
+        let pastIndex = index;
+        index += step;
+        return pastIndex;
+    };
+};
+
+module.exports = {
+    getCrossOrigin,
+    getFragmentAssetsToPreload,
+    getLoaderScript,
+    nextIndexGenerator
+};