brotli compression support

In #1929, we removed mobile-wiki's
reliance on an internal DFS bucket to store front-end assets. Unfortunately,
this also removed support for brotli compression (implemented via nginx servers
on the DFS nodes).

This patch restores support for brotli via ember-cli-deploy and
ember-cli-deploy-compress plugins to generate compressed assets during the build
step and serve them via express-static-gzip if the client supports them.

In order to actually enable brotli support, we will need to update our Fastly
VCL as well to ensure that we normalize the Accept-Encoding header to 'br' if
the client supports brotli. If we're not careful, this will invalidate all
mobile-wiki asset URLs, causing clients requesting older versions of asset
URLs embedded in cached HTML to be served a 404 from the current deployment and
fail. To fully remedy this, we may need to re-introduce semi-persistent asset
storage in either s3 or GCS, but for now, let's just change the asset URL paths
so that we can update the VCL logic only for the new paths, without invalidating
the old URLs.

app/index.html

@@ -9,9 +9,9 @@
 <!-- fallback to dns-prefetch for iOS where preconnect isn't supported yet -->
 <link rel="dns-prefetch" href="https://vignette.wikia.nocookie.net">
 
-<link rel="stylesheet" href="/mobile-wiki/assets/app.css">
-<script src="/mobile-wiki/assets/vendor.js" defer></script>
-<script src="/mobile-wiki/assets/mobile-wiki.js" defer></script>
+<link rel="stylesheet" href="/mobile-wiki/br/assets/app.css">
+<script src="/mobile-wiki/br/assets/vendor.js" defer></script>
+<script src="/mobile-wiki/br/assets/mobile-wiki.js" defer></script>
 <script>
   window.M = {};
 </script>
@@ -33,14 +33,14 @@
 {{content-for 'rubik-font'}}
 {{content-for 'svg-inline'}}
 {{content-for 'body'}}
-<script src="/mobile-wiki/assets/wikia-opt-in.min.js"></script>
+<script src="/mobile-wiki/br/assets/wikia-opt-in.min.js"></script>
 {{content-for 'fastboot-inline-scripts'}}
 {{content-for 'fastboot-inline-scripts-tracking'}}
 {{content-for 'fastboot-inline-scripts-load-svg'}}
 
 <script>
   (function (M) {
-    M.loadDOMResource('/mobile-wiki/assets/design-system.svg');
+    M.loadDOMResource('/mobile-wiki/br/assets/design-system.svg');
   })(window.M);
 </script>
 

app/modules/jwplayer-assets.js

@@ -1,8 +1,8 @@
 import { Promise } from 'rsvp';
 
 export const assetUrls = {
-  styles: '/mobile-wiki/assets/jwplayer/index.css',
-  script: '/mobile-wiki/assets/jwplayer/wikiajwplayer.js',
+  styles: '/mobile-wiki/br/assets/jwplayer/index.css',
+  script: '/mobile-wiki/br/assets/jwplayer/wikiajwplayer.js',
 };
 
 /**

app/templates/head.hbs

@@ -188,10 +188,10 @@
 
 {{#if model.lazyCss}}
   {{!- These styles will be added to head on front-end to lazy load them-}}
-  <link rel="stylesheet" href="/mobile-wiki/assets/lazy.css">
+  <link rel="stylesheet" href="/mobile-wiki/br/assets/lazy.css">
 {{/if}}
 
 {{#if model.shouldLoadDarkCss}}
   {{!- Styles for dark theme added only in the mobile app view-}}
-  <link rel="stylesheet" href="/mobile-wiki/assets/dark.css">
+  <link rel="stylesheet" href="/mobile-wiki/br/assets/dark.css">
 {{/if}}

config/bundlesize.js

@@ -5,7 +5,7 @@ const assetsFolder = 'mobile-wiki/assets';
 module.exports = {
   'mobile-wiki.js': {
     pattern: `${assetsFolder}/mobile-wiki-*.js`,
-    limit: '526KB',
+    limit: '527KB',
   },
   'vendor.js': {
     pattern: `${assetsFolder}/vendor-*.js`,

config/deploy.js

@@ -0,0 +1,31 @@
+/* eslint-env node */
+
+'use strict';
+
+module.exports = function (deployTarget) {
+  const ENV = {
+    build: {
+      outputPath: 'dist/mobile-wiki',
+    },
+    // include other plugin configuration that applies to all deploy targets here
+    compress: {
+      compression: ['gzip', 'brotli'],
+      keep: true,
+    },
+  };
+
+  if (deployTarget === 'development') {
+    ENV.build.environment = 'development';
+    // configure other plugins for development deploy target here
+  }
+
+  if (deployTarget === 'production') {
+    ENV.build.environment = 'production';
+    // configure other plugins for production deploy target here
+  }
+
+  // Note: if you need to build some configuration asynchronously, you can return
+  // a promise that resolves with the ENV object instead of returning the
+  // ENV object synchronously.
+  return ENV;
+};

fastboot-server/headers.js

@@ -31,13 +31,13 @@ module.exports = function (req, res, next) {
     try {
       // We do want to load this file in runtime and have a fallback if it does not exist
       /* eslint global-require: 0 */
-      vendorAssetPath = require('../dist/mobile-wiki/assets/assetMap.json').assets['assets/vendor.js'];
+      vendorAssetPath = require('../dist/mobile-wiki/br/assets/assetMap.json').assets['assets/vendor.js'];
     } catch (exception) {
-      vendorAssetPath = 'assets/vendor.js';
+      vendorAssetPath = '/br/assets/vendor.js';
     }
   }
 
-  if (!req.path.startsWith('/mobile-wiki/assets')) {
+  if (!req.path.startsWith('/mobile-wiki/br/assets')) {
     res.setHeader('link', `</mobile-wiki/${vendorAssetPath}>; rel=preload; as=script`);
   }
 

fastboot-server/middlewares.js

@@ -23,7 +23,7 @@ function levelFn(status) {
 
 module.exports = {
   before(app) {
-    app.use(compression());
+    app.use(/^(?!\/mobile-wiki\/)/, compression());
     app.disable('x-powered-by');
     app.use(logger);
 
@@ -45,6 +45,7 @@ module.exports = {
     app.use(/^(\/[a-z]{2,3}(?:-[a-z-]{2,12})?)?\/article-preview/, methodOverride(() => 'GET'));
 
     app.use('/mobile-wiki', cors(), staticAssets);
+    app.use('/mobile-wiki/br/', cors(), staticAssets);
     app.use('/heartbeat', heartbeat);
   },
 

fastboot-server/static-assets.js

@@ -1,10 +1,12 @@
-const express = require('express');
+const expressStaticGzip = require('express-static-gzip');
 const config = require('../config/fastboot-server');
 
-module.exports = express.static(config.distPath, {
-  setHeaders: (res) => {
-    res.set('Cache-Control', `s-maxage=${config.staticAssetsTTL}`);
-    res.set('X-Pass-Cache-Control', `public, max-age=${config.staticAssetsTTL}`);
-    res.set('Vary', 'accept-encoding');
+module.exports = expressStaticGzip(config.distPath, {
+  enableBrotli: true,
+  serveStatic: {
+    setHeaders: (res) => {
+      res.set('Cache-Control', `s-maxage=${config.staticAssetsTTL}`);
+      res.set('X-Pass-Cache-Control', `public, max-age=${config.staticAssetsTTL}`);
+    },
   },
 });