Add --html.assetsBaseURL option (#2321)

* Add --html.assetsBaseURL option The base URL to the server serving the assets of HTML results. In the format of https://result.sitespeed.io. This can be used to reduce size in large setups. If set, disables writing of assets. * Clarify html.assetsBaseURL parameter description
2019-03-01 08:19:01 +01:00 · 2019-03-01 08:19:01 +01:00 · fbdf293b6e
parent 4de22665d4
commit fbdf293b6e
8 changed files with 56 additions and 41 deletions
--- a/lib/cli/cli.js
+++ b/lib/cli/cli.js
@ -914,6 +914,11 @@ module.exports.parseCommandLine = function parseCommandLine() {
      type: 'boolean',
      group: 'HTML'
    })
+    .option('html.assetsBaseURL', {
+      describe:
+        'The base URL to the server serving the assets of HTML results. In the format of https://result.sitespeed.io. This can be used to reduce size in large setups. If set, disables writing of assets to the output folder.',
+      group: 'HTML'
+    })
    .option('summary', {
      describe: 'Show brief text summary to stdout',
      default: false,
--- a/lib/plugins/html/htmlBuilder.js
+++ b/lib/plugins/html/htmlBuilder.js
@ -65,6 +65,7 @@ class HTMLBuilder {
    log.debug('Render HTML for %s page(s) ', nTestedPages);
    const errors = dataCollector.getErrorUrls();
    const css = this.inlineCSS.join('');
+    const assetsBaseURL = this.options.html.assetsBaseURL;
    if (Object.keys(errors).length > 0) {
      this.summary.errors = {
        errors,
@ -167,6 +168,7 @@ class HTMLBuilder {
            css,
            h: helpers,
            rootPath: '',
+            assetsPath: assetsBaseURL || '',
            menu: name,
            pageTitle: name,
            pageDescription: '',
@ -237,16 +239,15 @@ class HTMLBuilder {
      // We use this for the filmstrip and in the  future we should use the data there
      // as median run all over in the HTML
      const medianPageInfo = runPages[medianRun.runIndex - 1];
-
-      let filmstripData =
-        medianPageInfo && medianPageInfo.data && medianPageInfo.data.browsertime
-          ? await filmstrip.getFilmstrip(
-              medianPageInfo.data.browsertime.run,
-              medianRun.runIndex,
-              this.storageManager.getFullPathToURLDir(url),
-              options
-            )
-          : [];
+      let filmstripData =  medianPageInfo && medianPageInfo.data && medianPageInfo.data.browsertime
+        ? await filmstrip.getFilmstrip(
+            medianPageInfo.data.browsertime.run,
+            medianRun.runIndex,
+            this.storageManager.getFullPathToURLDir(url),
+            options
+          )
+        : [];
+      let rootPath = this.storageManager.rootPathFromUrl(url);
      let data = {
        daurl: url,
        daurlAlias,
@ -264,7 +265,8 @@ class HTMLBuilder {
        h: helpers,
        JSON: JSON,
        markdown: markdown,
-        rootPath: this.storageManager.rootPathFromUrl(url),
+        rootPath,
+        assetsPath: assetsBaseURL || rootPath,
        menu: 'pages',
        pageTitle: `Summary for ${helpers.plural(
          this.options.browsertime.iterations,
@ -309,6 +311,7 @@ class HTMLBuilder {
          run => !!get(pageInfo.data, [run.id, 'run'])
        );

+        let rootPath = this.storageManager.rootPathFromUrl(url);
        let data = {
          daurl: url,
          daurlAlias,
@ -329,7 +332,8 @@ class HTMLBuilder {
          filmstrip: filmstripData,
          JSON: JSON,
          markdown: markdown,
-          rootPath: this.storageManager.rootPathFromUrl(url),
+          rootPath,
+          assetsPath: assetsBaseURL || rootPath,
          menu: 'pages',
          pageTitle: `Run ${parseInt(runIndex) +
            1} for ${url} at ${runTimestamp}`,
@ -352,16 +356,22 @@ class HTMLBuilder {
        );
      }
    }
-    // Aggregate/summarize data and write additional files
-    return this.storageManager
-      .copyToResultDir(path.join(__dirname, 'assets'))
-      .then(() =>
-        Promise.all(summaryRenders)
-          .then(() => Promise.all(urlPageRenders))
-          .then(() =>
-            log.info('HTML stored in %s', this.storageManager.getBaseDir())
-          )
-      );
+
+    let res;
+    if (this.options.html.assetsBaseURL) {
+      res = Promise.resolve();
+    } else {
+      res = this.storageManager.copyToResultDir(path.join(__dirname, 'assets'));
+    }
+
+    // Aggregate/summarize data
+    return res.then(() =>
+      Promise.all(summaryRenders)
+        .then(() => Promise.all(urlPageRenders))
+        .then(() =>
+          log.info('HTML stored in %s', this.storageManager.getBaseDir())
+        )
+    );
  }

  async _renderUrlPage(url, name, locals) {
--- a/lib/plugins/html/templates/header.pug
+++ b/lib/plugins/html/templates/header.pug
@ -8,7 +8,7 @@ mixin headerLink(id, name)
  .navgrid
    .logo
        a(href='https://www.sitespeed.io')
-          img.navbar-brand(src= rootPath + 'img/sitespeed.io-logo.png', width='162', height='50', alt='sitespeed.io logo')
+          img.navbar-brand(src= assetsPath + 'img/sitespeed.io-logo.png', width='162', height='50', alt='sitespeed.io logo')
    ul
      +headerLink('index', 'Summary')
      +headerLink('detailed', 'Detailed Summary')
--- a/lib/plugins/html/templates/layout.pug
+++ b/lib/plugins/html/templates/layout.pug
@ -6,16 +6,16 @@ html(lang='en')
        title= pageTitle
        meta(name='description', content=pageDescription)
        meta(name='robots', content='noindex')
-        link(rel='stylesheet', href=rootPath + 'css/index.min.css')
+        link(rel='stylesheet', href=assetsPath + 'css/index.min.css')
        block inlineStyles
        style(type='text/css').
         #{css}

-        link(rel='apple-touch-icon-precomposed', sizes='144x144', href=rootPath + 'img/ico/sitespeed.io-144.png')
-        link(rel='apple-touch-icon-precomposed', sizes='114x114', href=rootPath + 'img/ico/sitespeed.io-114.png')
-        link(rel='apple-touch-icon-precomposed', sizes='72x72', href=rootPath + 'img/ico/sitespeed.io-72.png')
-        link(rel='apple-touch-icon-precomposed', href=rootPath + 'img/ico/sitespeed.io-57.png')
-        link(rel='shortcut icon', href=rootPath + 'img/ico/sitespeed.io.ico')
+        link(rel='apple-touch-icon-precomposed', sizes='144x144', href=assetsPath + 'img/ico/sitespeed.io-144.png')
+        link(rel='apple-touch-icon-precomposed', sizes='114x114', href=assetsPath + 'img/ico/sitespeed.io-114.png')
+        link(rel='apple-touch-icon-precomposed', sizes='72x72', href=assetsPath + 'img/ico/sitespeed.io-72.png')
+        link(rel='apple-touch-icon-precomposed', href=assetsPath + 'img/ico/sitespeed.io-57.png')
+        link(rel='shortcut icon', href=assetsPath + 'img/ico/sitespeed.io.ico')
    body
      include ./header.pug
      .container
@ -23,7 +23,7 @@ html(lang='en')
        block content

        include ./footer.pug
-      script(src= rootPath + 'js/sortable.min.js')
-      script(src= rootPath + 'js/chartist.min.js')
-      script(src= rootPath + 'js/chartist-plugin-axistitle.min.js')
-      script(src= rootPath + 'js/chartist-plugin-tooltip.min.js')
+      script(src= assetsPath + 'js/sortable.min.js')
+      script(src= assetsPath + 'js/chartist.min.js')
+      script(src= assetsPath + 'js/chartist-plugin-axistitle.min.js')
+      script(src= assetsPath + 'js/chartist-plugin-tooltip.min.js')
--- a/lib/plugins/html/templates/url/coach/index.pug
+++ b/lib/plugins/html/templates/url/coach/index.pug
@ -34,7 +34,7 @@ h2 Coach
 p.small
  a(href='https://github.com/sitespeedio/coach') The coach
  | &nbsp;helps you find performance problems on your web page using web performance best practice rules. And gives you advice on accessibility, privacy and best practices.
-  
+
 script(type='text/javascript').
  function toggleRow(toggleElement) {
    const rows = toggleElement.nextSibling.getElementsByClassName("u-hideable");
@ -50,7 +50,7 @@ script(type='text/javascript').
    .row
      .four.columns
        a(href='https://github.com/sitespeedio/coach')
-          img.u-max-full-width(src= rootPath + 'img/coach.png', alt='I am the coach')
+          img.u-max-full-width(src= assetsPath + 'img/coach.png', alt='I am the coach')
      .eight.columns
        h3 Coach score
        ul
--- a/lib/plugins/html/templates/url/video/index.pug
+++ b/lib/plugins/html/templates/url/video/index.pug
@ -2,13 +2,13 @@
 - const width = options.mobile ? 'max-width: 400px;' : h.get(options, 'browsertime.chrome.android.package') ? 'max-width: 400px;' : 'width: 100%'

 a#video
-h3 Video 
+h3 Video
 .videoWrapper(style=width)
  - screenshotName = 'data/screenshots/' + videoIndex + '.' + screenShotType
  video.video-js.vjs-default-skin.vjs-big-play-centered(controls, preload='none', poster=screenshotName, data-setup='{ "fluid": true, "playbackRates": [0.1, 0.2, 0.5, 1] ,"volumeControl": false}')
    source(src='data/video/' + videoIndex +'.mp4', type='video/mp4')

-script(src= rootPath + 'js/video.novtt.min.js')
+script(src= assetsPath + 'js/video.novtt.min.js')

 - const videoPath = 'data/video/' + (iteration ? iteration : medianRun.runIndex ) +'.mp4'
 a.button.button-download(href=videoPath, download=downloadName + '-video.mp4') Download video
--- a/lib/plugins/html/templates/url/waterfall/fetchHAR.pug
+++ b/lib/plugins/html/templates/url/waterfall/fetchHAR.pug
@ -1,6 +1,6 @@
 .loader#output
-script(src= rootPath + 'js/fetch.min.js')
-script(src= rootPath + 'js/perf-cascade.min.js')
+script(src= assetsPath + 'js/fetch.min.js')
+script(src= assetsPath + 'js/perf-cascade.min.js')
 script(type='text/javascript').
  const outputHolderEl = document.getElementById("output");
  const pageSelectorEl = document.getElementById("page-selector");
@ -16,7 +16,7 @@ script(type='text/javascript').
    selectedPage: #{harIndex}
  };
 if options.gzipHAR
-    script(src= rootPath + 'js/gunzip.min.js')
+    script(src= assetsPath + 'js/gunzip.min.js')
    script(type='text/javascript').
      if (window["fetch"]) {
          window["fetch"]('data/browsertime.har.gz')
--- a/lib/plugins/html/templates/url/waterfall/includeHARinHTML.pug
+++ b/lib/plugins/html/templates/url/waterfall/includeHARinHTML.pug
@ -3,7 +3,7 @@
 // specific run (the median run) in summaryPageHAR.
 - dahar = h.get(pageInfo.data, 'browsertime.run.har', summaryPageHAR)

-script(src= rootPath + 'js/perf-cascade.min.js')
+script(src= assetsPath + 'js/perf-cascade.min.js')
 script(type='text/javascript').
  const outputHolderEl = document.getElementById("output");
  const pageSelectorEl = document.getElementById("page-selector");