Optimise CSS and JSON files (#2569)

Author: absidue

_scripts/webpack.main.config.js

@@ -1,6 +1,7 @@
 const path = require('path')
 const webpack = require('webpack')
 const CopyWebpackPlugin = require('copy-webpack-plugin')
+const JsonMinimizerPlugin = require('json-minimizer-webpack-plugin')
 
 const { productName } = require('../package.json')
 
@@ -30,6 +31,13 @@ const config = {
       },
     ],
   },
+  // webpack defaults to only optimising the production builds, so having this here is fine
+  optimization: {
+    minimizer: [
+      '...', // extend webpack's list instead of overwriting it
+      new JsonMinimizerPlugin()
+    ]
+  },
   node: {
     __dirname: isDevMode,
     __filename: isDevMode,

_scripts/webpack.renderer.config.js

@@ -3,6 +3,7 @@ const webpack = require('webpack')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
 const VueLoaderPlugin = require('vue-loader/lib/plugin')
 const MiniCssExtractPlugin = require('mini-css-extract-plugin')
+const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')
 
 const { productName } = require('../package.json')
 
@@ -99,6 +100,13 @@ const config = {
       },
     ],
   },
+  // webpack defaults to only optimising the production builds, so having this here is fine
+  optimization: {
+    minimizer: [
+      '...', // extend webpack's list instead of overwriting it
+      new CssMinimizerPlugin()
+    ]
+  },
   node: {
     __dirname: isDevMode,
     __filename: isDevMode,

_scripts/webpack.web.config.js

@@ -4,6 +4,8 @@ const HtmlWebpackPlugin = require('html-webpack-plugin')
 const VueLoaderPlugin = require('vue-loader/lib/plugin')
 const CopyWebpackPlugin = require('copy-webpack-plugin')
 const MiniCssExtractPlugin = require('mini-css-extract-plugin')
+const JsonMinimizerPlugin = require('json-minimizer-webpack-plugin')
+const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')
 
 const { productName } = require('../package.json')
 
@@ -99,6 +101,14 @@ const config = {
       },
     ],
   },
+  // webpack defaults to only optimising the production builds, so having this here is fine
+  optimization: {
+    minimizer: [
+      '...', // extend webpack's list instead of overwriting it
+      new JsonMinimizerPlugin(),
+      new CssMinimizerPlugin()
+    ]
+  },
   node: {
     __dirname: isDevMode,
     __filename: isDevMode,

package.json

@@ -92,6 +92,7 @@
     "babel-loader": "^8.2.5",
     "copy-webpack-plugin": "^11.0.0",
     "css-loader": "^6.7.1",
+    "css-minimizer-webpack-plugin": "^4.1.0",
     "electron": "^20.1.2",
     "electron-builder": "^23.3.3",
     "electron-debug": "^3.2.0",
@@ -105,6 +106,7 @@
     "eslint-plugin-standard": "^5.0.0",
     "eslint-plugin-vue": "^7.17.0",
     "html-webpack-plugin": "^5.3.2",
+    "json-minimizer-webpack-plugin": "^4.0.0",
     "mini-css-extract-plugin": "^2.2.2",
     "node-loader": "^2.0.0",
     "npm-run-all": "^4.1.5",