Precompress and optimize static files during build and serve them to the browsers.

- create precompressed variants of js, css, svg files: gz using zopfli and br using brotli

Currently using forked versions of expressjs/send/negotiator while waiting for the PRs to go through:
- jshttp/negotiator#49
- pillarjs/send#108

Author: Mikko Tiihonen

package.json

@@ -59,7 +59,7 @@
     "csscolorparser": "1.0.3",
     "debug": "2.3.3",
     "element-resize-detector": "1.1.9",
-    "express": "4.14.0",
+    "express": "gmokki/express#6eeb054",
     "fluxible": "1.2.0",
     "fluxible-action-utils": "0.2.4",
     "fluxible-addons-react": "0.2.8",
@@ -112,7 +112,9 @@
     "babel-loader": "6.2.8",
     "babel-plugin-dev-expression": "0.2.1",
     "babel-preset-latest": "6.16.0",
+    "brotli-webpack-plugin": "0.1.1",
     "chance": "1.0.4",
+    "compression-webpack-plugin": "0.3.2",
     "css-loader": "0.26.0",
     "csswring": "5.1.0",
     "eslint": "3.10.2",

server/server.js

@@ -42,7 +42,10 @@ const app = express();
 function setUpStaticFolders() {
   const staticFolder = path.join(process.cwd(), '_static');
   // Sert cache for 1 week
-  app.use(config.APP_PATH, express.static(staticFolder, { maxAge: 604800000 }));
+  app.use(config.APP_PATH, express.static(staticFolder, {
+    maxAge: 604800000,
+    precompressed: [{ encoding: 'br', extension: '.br' }, { encoding: 'gzip', extension: '.gz' }],
+  }));
 }
 
 function setUpMiddleware() {

webpack.config.js

@@ -9,6 +9,8 @@ const autoprefixer = require('autoprefixer');
 const csswring = require('csswring');
 const StatsPlugin = require('stats-webpack-plugin');
 const fs = require('fs');
+const GzipCompressionPlugin = require("compression-webpack-plugin")
+const BrotliCompressionPlugin = require('brotli-webpack-plugin')
 
 require('babel-core/register')({
   presets: ['modern-node', 'stage-2'], // eslint-disable-line prefer-template
@@ -153,6 +155,19 @@ function getPluginsConfig(env) {
       filename: 'css/[name].[contenthash].css',
       allChunks: true,
     }),
+    new GzipCompressionPlugin({
+      debug: true,
+      asset: '[path].gz[query]',
+      algorithm: 'zopfli',
+      test: /\.(js|css|html|svg)$/,
+      minRatio: 0.95
+    }),
+    new BrotliCompressionPlugin({
+      debug: true,
+      asset: '[path].br[query]',
+      test: /\.(js|css|html|svg)$/,
+      minRatio: 0.95
+    }),
     new webpack.NoErrorsPlugin(),
   ]);
 }