From bea4201f18b3f3228025ba334bdae4550bf302d2 Mon Sep 17 00:00:00 2001
From: Sebastian Serth <Sebastian.Serth@hpi.de>
Date: Fri, 12 Aug 2022 20:21:48 +0200
Subject: [PATCH] Add options to minify Webpack output and rearrange
 webpack.config.js

---
 config/webpack/webpack.config.js | 44 +++++++++++++++++++++-----------
 1 file changed, 29 insertions(+), 15 deletions(-)

diff --git a/config/webpack/webpack.config.js b/config/webpack/webpack.config.js
index 2affdfc8..4c87c5ff 100644
--- a/config/webpack/webpack.config.js
+++ b/config/webpack/webpack.config.js
@@ -3,6 +3,11 @@
 const { webpackConfig, merge } = require('shakapacker')
 const webpack = require('webpack');
 
+const CompressionPlugin = require("compression-webpack-plugin");
+const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const TerserPlugin = require("terser-webpack-plugin");
+
 // Custom ERB loader to disable Spring and prevent crashes
 const erb = require("./loaders/erb");
 
@@ -12,21 +17,24 @@ const relative_url_root = process.env.RAILS_RELATIVE_URL_ROOT || '';
 const public_output_path = webpackConfig.output.publicPath;
 
 const envConfig = module.exports = {
-    output: {
-        publicPath: relative_url_root + public_output_path
-    },
     module: {
         rules: [
             erb
         ]
     },
-    resolve: {
-        extensions: ['.css', '.ts', '.tsx'],
-        alias: {
-            $: 'jquery/src/jquery',
-            jquery: 'jquery/src/jquery',
-            vis$: 'vis-timeline/standalone',
-        }
+    optimization: {
+        minimize: true,
+        minimizer: [
+            new TerserPlugin(),
+            new CssMinimizerPlugin()
+        ],
+    },
+    output: {
+        publicPath: relative_url_root + public_output_path
+    },
+    performance: {
+        // Turn off size warnings for large assets
+        hints: false
     },
     plugins: [
         new webpack.ProvidePlugin({
@@ -41,13 +49,19 @@ const envConfig = module.exports = {
             d3: 'd3',
             Sentry: '@sentry/browser',
             Sortable: 'sortablejs',
-        })
+        }),
+        new CompressionPlugin(),
+        new MiniCssExtractPlugin(),
     ],
-    performance: {
-        // Turn off size warnings for large assets
-        hints: false
+    resolve: {
+        extensions: ['.css', '.ts', '.tsx'],
+        alias: {
+            $: 'jquery/src/jquery',
+            jquery: 'jquery/src/jquery',
+            vis$: 'vis-timeline/standalone',
+        }
     },
-    stats: 'minimal'
+    stats: 'minimal',
 }
 
 module.exports = merge(webpackConfig, envConfig)