Use zopfli and brotli for improved compression of assets

.travis.yml

@@ -3,6 +3,14 @@ node_js:
   - "node"
   - "6"
   - "4"
+env:
+  - CXX=g++-4.8
+addons:
+  apt:
+    sources:
+      - ubuntu-toolchain-r-test
+    packages:
+      - g++-4.8
 cache:
   yarn: true
   directories:

package.json

@@ -59,12 +59,14 @@
     "glamor": "2.20.20",
     "glob-promise": "3.1.0",
     "htmlescape": "1.1.1",
+    "iltorb": "^1.0.13",
     "is-windows-bash": "1.0.3",
     "json-loader": "0.5.4",
     "loader-utils": "0.2.16",
     "minimist": "1.2.0",
     "mkdirp-then": "1.2.0",
     "mz": "2.6.0",
+    "node-zopfli": "^2.0.2",
     "path-match": "1.2.4",
     "react": "15.4.1",
     "react-dom": "15.4.1",

server/build/gzip.js → server/build/compress.js

@@ -1,9 +1,10 @@
 import fs from 'fs'
 import path from 'path'
-import zlib from 'zlib'
+import iltorb from 'iltorb'
+import zopfli from 'node-zopfli'
 import glob from 'glob-promise'
 
-export default async function gzipAssets (dir) {
+export default async function compressAssets (dir) {
   const nextDir = path.resolve(dir, '.next')
 
   const coreAssets = [
@@ -18,11 +19,12 @@ export default async function gzipAssets (dir) {
   ]
 
   while (true) {
-    // gzip only 10 assets in parallel at a time.
+    // compress only 10 assets in parallel at a time.
     const currentChunk = allAssets.splice(0, 10)
     if (currentChunk.length === 0) break
 
     await Promise.all(currentChunk.map(gzip))
+    await Promise.all(currentChunk.map(brotli))
   }
 }
 
@@ -31,7 +33,18 @@ export function gzip (filePath) {
   const output = fs.createWriteStream(`${filePath}.gz`)
 
   return new Promise((resolve, reject) => {
-    const stream = input.pipe(zlib.createGzip()).pipe(output)
+    const stream = input.pipe(zopfli.createGzip()).pipe(output)
+    stream.on('error', reject)
+    stream.on('finish', resolve)
+  })
+}
+
+export function brotli (filePath) {
+  const input = fs.createReadStream(filePath)
+  const output = fs.createWriteStream(`${filePath}.br`)
+
+  return new Promise((resolve, reject) => {
+    const stream = input.pipe(iltorb.compressStream()).pipe(output)
     stream.on('error', reject)
     stream.on('finish', resolve)
   })

server/build/index.js

@@ -1,6 +1,6 @@
 import webpack from './webpack'
 import clean from './clean'
-import gzipAssets from './gzip'
+import compressAssets from './compress'
 
 export default async function build (dir) {
   const [compiler] = await Promise.all([
@@ -9,7 +9,7 @@ export default async function build (dir) {
   ])
 
   await runCompiler(compiler)
-  await gzipAssets(dir)
+  await compressAssets(dir)
 }
 
 function runCompiler (compiler) {

server/index.js

@@ -8,7 +8,7 @@ import {
   renderErrorJSON,
   sendHTML,
   serveStatic,
-  serveStaticWithGzip
+  serveStaticWithCompression
 } from './render'
 import Router from './router'
 import HotReloader from './hot-reloader'
@@ -62,12 +62,12 @@ export default class Server {
 
     this.router.get('/_next/main.js', async (req, res, params) => {
       const p = join(this.dir, '.next/main.js')
-      await serveStaticWithGzip(req, res, p)
+      await serveStaticWithCompression(req, res, p)
     })
 
     this.router.get('/_next/commons.js', async (req, res, params) => {
       const p = join(this.dir, '.next/commons.js')
-      await serveStaticWithGzip(req, res, p)
+      await serveStaticWithCompression(req, res, p)
     })
 
     this.router.get('/_next/pages/:path*', async (req, res, params) => {

server/render.js

@@ -98,7 +98,7 @@ async function doRender (req, res, pathname, query, {
 
 export async function renderJSON (req, res, page, { dir = process.cwd() } = {}) {
   const pagePath = join(dir, '.next', 'bundles', 'pages', `${page}.json`)
-  return serveStaticWithGzip(req, res, pagePath)
+  return serveStaticWithCompression(req, res, pagePath)
 }
 
 export async function renderErrorJSON (err, req, res, { dir = process.cwd(), dev = false } = {}) {
@@ -141,10 +141,38 @@ function errorToJSON (err) {
   return json
 }
 
+export async function serveStaticWithCompression (req, res, path) {
+  serveStaticWithBrotli(req, res, path) || serveStaticWithGzip(req, res, path) || serveStatic(req, res, path)
+}
+
+export async function serveStaticWithBrotli (req, res, path) {
+  const encoding = accepts(req).encodings(['br'])
+  if (encoding !== 'br') {
+    return
+  }
+
+  try {
+    const brotliPath = `${path}.br`
+    // fs.access before a file read is not recommeded due to race conditions.
+    // But in this case, this is totally fine because we know
+    // it's impossible to have a race condition like that.
+    // (Since we compress AOT when called `next build`)
+    await fs.access(brotliPath, fs.constants.R_OK)
+
+    res.setHeader('Content-Encoding', 'br')
+    return serveStatic(req, res, brotliPath)
+  } catch (ex) {
+    if (ex.code === 'ENOENT') {
+      return
+    }
+    throw ex
+  }
+}
+
 export async function serveStaticWithGzip (req, res, path) {
   const encoding = accepts(req).encodings(['gzip'])
   if (encoding !== 'gzip') {
-    return serveStatic(req, res, path)
+    return
   }
 
   try {
@@ -159,7 +187,7 @@ export async function serveStaticWithGzip (req, res, path) {
     return serveStatic(req, res, gzipPath)
   } catch (ex) {
     if (ex.code === 'ENOENT') {
-      return serveStatic(req, res, path)
+      return
     }
     throw ex
   }