Minimize bundle.js payload

[pdehaan]

Currently, it looks like https://hardware.metrics.mozilla.com/build/js/bundle.js has a Content-Length of 1,723,137 bytes (or 1,682.750976562 KB or ~1.64 MB). Seems high.

But fear not! It looks like https://github.com/webpack/webpack/issues/2545#issuecomment-334993864 has a potential solution for minifying ES6 code using the uglifyjs-webpack-plugin. I think I have this working locally and it drops the bundle.js Content-Length from 1.64 MB down to 679,591 bytes (or 663.663085938 KB or 0.648 MB). Shaving another 1MB off the page load.

diff --git a/package.json b/package.json
index 8b7f7da..2939234 100644
--- a/package.json
+++ b/package.json
@@ -24,6 +24,7 @@
     "resolve-url-loader": "2.3.0",
     "sass-loader": "7.0.1",
     "style-loader": "0.20.3",
+    "uglifyjs-webpack-plugin": "1.2.4",
     "url-loader": "1.0.1",
     "webpack": "3.11.0",
     "webpack-dev-server": "2.11.2"

diff --git a/webpack.config.js b/webpack.config.js
index a281b29..15513ad 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -1,14 +1,30 @@
-var path = require('path');
-var webpack = require('webpack');
+const path = require('path');
+const webpack = require('webpack');
+const UglifyJSPlugin = require('uglifyjs-webpack-plugin');

 module.exports = {
   devtool: 'source-map',
   entry: ['bootstrap-loader', './static/js/main.js'],
   plugins: [
+    new webpack.DefinePlugin({
+      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'production')
+    }),
     new webpack.ProvidePlugin({
-      $: "jquery",
-      jQuery: "jquery",
+      $: 'jquery',
+      jQuery: 'jquery',
+    }),
+    new webpack.LoaderOptionsPlugin({
+      minimize: true,
+      debug: false
     }),
+    new UglifyJSPlugin({
+      uglifyOptions: {
+        beautify: false,
+        ecma: 6,
+        compress: true,
+        comments: false
+      }
+    })
   ],
   output: {
     path: path.join(__dirname, 'static', 'build', 'js'),

And while 663KB still sounds super big for some JavaScript, I think this is possibly bundling all of our app's JS, plus:

• jQuery JavaScript Library v3.3.1
• Sizzle CSS Selector Engine v2.3.3
• jQuery UI Effects 1.12.1
• jQuery Color Animations v2.1.2
• jQuery UI Effects Shake 1.12.1

!function(t){...};
/*!
 * jQuery JavaScript Library v3.3.1
 * https://jquery.com/
 *
 * Includes Sizzle.js
 * https://sizzlejs.com/
 *
 * Copyright JS Foundation and other contributors
 * Released under the MIT license
 * https://jquery.org/license
 *
 * Date: 2018-01-20T17:24Z
 */
/*!
 * jQuery JavaScript Library v3.3.1
 * https://jquery.com/
 *
 * Includes Sizzle.js
 * https://sizzlejs.com/
 *
 * Copyright JS Foundation and other contributors
 * Released under the MIT license
 * https://jquery.org/license
 *
 * Date: 2018-01-20T17:24Z
 */
!function(e,n){{...};
/*!
 * Sizzle CSS Selector Engine v2.3.3
 * https://sizzlejs.com/
 *
 * Copyright jQuery Foundation and other contributors
 * Released under the MIT license
 * http://jquery.org/license
 *
 * Date: 2016-08-08
 */
function(t){...};
/*!
 * jQuery UI Effects 1.12.1
 * http://jqueryui.com
 *
 * Copyright jQuery Foundation and other contributors
 * Released under the MIT license.
 * http://jquery.org/license
 */
/*!
 * jQuery UI Effects 1.12.1
 * http://jqueryui.com
 *
 * Copyright jQuery Foundation and other contributors
 * Released under the MIT license.
 * http://jquery.org/license
 */
a=function(t){...},
/*!
 * jQuery Color Animations v2.1.2
 * https://github.com/jquery/jquery-color
 *
 * Copyright 2014 jQuery Foundation and other contributors
 * Released under the MIT license.
 * http://jquery.org/license
 *
 * Date: Wed Jan 16 08:47:09 2013 -0600
 */
function(t,e){...};
/*!
 * jQuery UI Effects Shake 1.12.1
 * http://jqueryui.com
 *
 * Copyright jQuery Foundation and other contributors
 * Released under the MIT license.
 * http://jquery.org/license
 */
/*!
 * jQuery UI Effects Shake 1.12.1
 * http://jqueryui.com
 *
 * Copyright jQuery Foundation and other contributors
 * Released under the MIT license.
 * http://jquery.org/license
 */
a=function(t){...};

---

https://hardware.metrics.mozilla.com/:

---

http://localhost:3000/:

[pdehaan]

Actually, just before I close this tab, here's a complete breakdown of the 19 network requests via DevTools. I've highlighted any network request over 100 KB in red (bundle.js (664.03 KB), bg3.jpg (283 KB), and hwsurvey-weekly.json (537.23 KB)), and anything over 10 KB in yellow (index.html (16.25 KB), metricsgraphics-dark.css (13.89 KB), and analytics.js (14.83 KB)):

I think we can only shave a couple KB off of the bg3.jpg image (which barely seems worth the effort), and bundle.js was already minimized (using my diff from above). I'm not 100% sure about the https://analysis-output.telemetry.mozilla.org/game-hardware-survey/data/hwsurvey-weekly.json file. When I browse to it, it tries to download to my computer, and it looks like an unminimized 538 KB JSON blob. Minimizing hwsurvey-weekly.json via jq, $ jq -c . hwsurvey-weekly.json > hwsurvey-weekly.min.json, gives me a 442 KB file; according to iTerm. So you could potentially shave another 92 KB by simply minimizing the JSON, but that may require a change to analysis-output.telemetry.mozilla.org.