[NIFI-6300] gzip compress assets

package.json

@@ -16,7 +16,7 @@
     "name": "nifi-fds",
     "version": "0.1.0",
     "scripts": {
-        "start": "./node_modules/http-server/bin/http-server -p 28080 .",
+        "start": "./node_modules/http-server/bin/http-server --gzip -p 28080 .",
         "build:webapp:bundle:development": "npm run webpack:development",
         "build:webapp:bundle:production": "npm run webpack:production",
         "clean:install": "bash ./scripts/clean-install",
@@ -27,8 +27,9 @@
         "test": "karma start karma.conf.js --single-run",
         "test:dev": "karma start karma.conf.js",
         "watch": "npm run webpack:development && ./node_modules/.bin/webpack-dev-server --config webpack.dev.js",
+        "webpack:analyze": "./node_modules/.bin/webpack-bundle-analyzer webpack-build-log.json ./",
         "webpack:development": "./node_modules/.bin/webpack --config webpack.dev.js",
-        "webpack:production": "npm run lint && ./node_modules/.bin/webpack --config webpack.prod.js",
+        "webpack:production": "npm run lint && ./node_modules/.bin/webpack --config webpack.prod.js --json --progress --profile > webpack-build-log.json",
         "eslint": "./node_modules/.bin/eslint './webapp/**/*.js' './platform/**/*.js'",
         "stylelint": "./node_modules/.bin/stylelint './webapp/theming/**/*.scss' './platform/**/*.scss'",
         "lint": "npm run eslint && npm run stylelint"
@@ -91,6 +92,7 @@
         "babel-loader": "8.0.5",
         "babel-polyfill": "6.26.0",
         "cache-loader": "2.0.1",
+        "compression-webpack-plugin": "2.0.0",
         "css-loader": "2.1.1",
         "dtsgenerator": "2.0.6",
         "eslint": "5.14.1",
@@ -103,8 +105,8 @@
         "grunt-bump": "0.8.0",
         "grunt-cli": "1.3.2",
         "html-loader": "0.5.5",
-        "http-server": "0.11.1",
         "html-webpack-plugin": "3.2.0",
+        "http-server": "0.11.1",
         "husky": "2.1.0",
         "istanbul-instrumenter-loader": "3.0.1",
         "jasmine": "3.4.0",
@@ -131,6 +133,7 @@
         "ts-loader": "5.3.3",
         "typescript": "3.3.4000",
         "webpack": "4.29.6",
+        "webpack-bundle-analyzer": "3.3.2",
         "webpack-cli": "3.3.0",
         "webpack-dev-server": "3.3.1",
         "webpack-fix-style-only-entries": "0.2.1",

webpack.common.js

@@ -22,6 +22,7 @@ const FixStyleOnlyEntriesPlugin = require('webpack-fix-style-only-entries');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const loaders = require('./webpack.loader');
+const CompressionPlugin = require('compression-webpack-plugin');
 
 module.exports = {
     // Deployment target
@@ -100,6 +101,11 @@ module.exports = {
         new HtmlWebpackPlugin({
             template: 'webapp/template.html',
             filename: 'index.html'
+        }),
+
+        new CompressionPlugin({
+            algorithm: 'gzip',
+            test: /\.min.js$|\.min.css$|runtime.js$/
         })
     ]
 };

webpack.dev.js

@@ -45,6 +45,9 @@ module.exports = merge(commonConfig, {
         // Enable Hot Module Replacement feature
         hot: true,
 
+        // Enable gzip compression for everything served
+        compress: true,
+
         // The filename that is considered the index file.
         index: path.join(__dirname, 'index.html'),
 
@@ -69,17 +72,17 @@ module.exports = merge(commonConfig, {
                 const licTextArray = modules.map((lic) => {
                     if (lic.licenseText && lic.licenseId) {
                         const license = lic.licenseText.replace(/\n/gm, '\n\t');
-                        const licText =`This product bundles '${lic.packageJson.name}' which is available under a(n) ${lic.licenseId} license.\n\n\t${license}`;
+                        const licText = `This product bundles '${lic.packageJson.name}' which is available under a(n) ${lic.licenseId} license.\n\n\t${license}`;
 
                         return licText;
                     } else {
                         console.log('\n**********************\n');
                         console.log(lic.packageJson);
                         if (lic.packageJson.license) {
-                            const missingLicenseText = `*** No license text found ***\n`
-                            const licText =`This product bundles '${lic.packageJson.name}' which is available under a(n) ${lic.packageJson.license} license.\n\t${missingLicenseText}`;
+                            const missingLicenseText = `*** No license text found ***\n`;
+                            const licText = `This product bundles '${lic.packageJson.name}' which is available under a(n) ${lic.packageJson.license} license.\n\t${missingLicenseText}`;
 
-                            return licText
+                            return licText;
                         } else {
                             return `\n\n!!! No license information found for ${lic.packageJson.name} !!!\n\n`;
                         }

webpack.prod.js

@@ -18,6 +18,7 @@
 const merge = require('webpack-merge');
 const TerserJSPlugin = require('terser-webpack-plugin');
 const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
+const cssnano = require('cssnano');
 
 const commonConfig = require('./webpack.common');
 
@@ -29,12 +30,21 @@ module.exports = merge(commonConfig, {
     devtool: 'source-map',
 
     optimization: {
+        noEmitOnErrors: true,
         minimizer: [
             // Minify JavaScript
             new TerserJSPlugin({}),
 
             // Minify CSS
-            new OptimizeCSSAssetsPlugin({})
+            new OptimizeCSSAssetsPlugin({
+                cssProcessor: cssnano,
+                cssProcessorOptions: {
+                    discardComments: {
+                        removeAll: true
+                    }
+                },
+                canPrint: false
+            })
         ],
-    },
+    }
 });