perf(webpack): tweak/update plugins, build optimizations

- allow configuring client port
- remove unused expose-loader
- remove unused webpack-manifest-plugin
- change favicon-webpack-plugin to fix development mode warnings
- add swc plugin to optimize compiled js
- add sharp, svgo plugins to optimize images, SVGs
- cache production build data on filesystem, clean build folder before building

Author: purfectliterature

client/app/lib/moment-timezone.js

@@ -117,6 +117,7 @@
     "@formatjs/cli": "^6.2.7",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.11",
     "@svgr/webpack": "^8.1.0",
+    "@swc/core": "^1.11.21",
     "@testing-library/jest-dom": "^6.4.2",
     "@testing-library/react": "^15.0.7",
     "@testing-library/user-event": "^14.5.2",
@@ -170,11 +171,11 @@
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-simple-import-sort": "^12.1.0",
     "eslint-plugin-sonarjs": "^0.24.0",
-    "expose-loader": "^5.0.0",
     "favicons": "^7.1.4",
     "favicons-webpack-plugin": "^6.0.1",
     "fork-ts-checker-webpack-plugin": "^9.0.2",
     "html-webpack-plugin": "^5.6.0",
+    "image-minimizer-webpack-plugin": "^4.1.3",
     "jest": "^29.7.0",
     "jest-canvas-mock": "^2.5.2",
     "jest-environment-jsdom": "^29.7.0",
@@ -189,15 +190,16 @@
     "redux-logger": "^3.0.6",
     "sass": "^1.76.0",
     "sass-loader": "^14.1.0",
+    "sharp": "^0.34.1",
     "style-loader": "^3.3.4",
+    "svgo": "^3.3.2",
     "tailwindcss": "^3.4.1",
     "terser-webpack-plugin": "^5.3.10",
     "ts-jest": "^29.1.2",
     "typescript": "^5.4.3",
     "webpack": "^5.94.0",
     "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^5.0.4",
-    "webpack-manifest-plugin": "^5.0.0",
     "webpack-merge": "^5.10.0"
   },
   "resolutions": {

client/package.json

@@ -4,7 +4,6 @@ const {
   ContextReplacementPlugin,
   DefinePlugin,
 } = require('webpack');
-const { WebpackManifestPlugin } = require('webpack-manifest-plugin');
 const DotenvPlugin = require('dotenv-webpack');
 const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
@@ -15,6 +14,9 @@ const cssIncludes = require('./css-includes.json');
 
 const ENV_DIR = process.env.BABEL_ENV === 'e2e-test' ? './.env.test' : './.env';
 
+/**
+ * @type {import('webpack').Configuration}
+ */
 module.exports = {
   entry: './app/index.tsx',
   output: {
@@ -46,12 +48,12 @@ module.exports = {
   plugins: [
     new DotenvPlugin({ path: ENV_DIR }),
     new IgnorePlugin({ resourceRegExp: /__test__/ }),
-    new WebpackManifestPlugin({
-      publicPath: '/webpack/',
-      writeToFileEmit: true,
-    }),
     new HtmlWebpackPlugin({ template: './public/index.html' }),
-    new FaviconsWebpackPlugin({ logo: './favicon.svg', inject: true }),
+    new FaviconsWebpackPlugin({
+      logo: './favicon.svg',
+      inject: true,
+      mode: 'auto',
+    }),
     // Do not require all locales in moment
     new ContextReplacementPlugin(/moment\/locale$/, /^\.\/(en-.*|zh-.*)$/),
     new ForkTsCheckerWebpackPlugin({
@@ -118,13 +120,6 @@ module.exports = {
         ],
         exclude: /node_modules/,
       },
-      {
-        test: require.resolve('./app/lib/moment-timezone'),
-        loader: 'expose-loader',
-        options: {
-          exposes: 'moment',
-        },
-      },
       {
         test: /\.md$/,
         type: 'asset/source',

client/webpack.common.js

@@ -5,6 +5,7 @@ const common = require('./webpack.common');
 const packageJSON = require('./package.json');
 
 const SERVER_PORT = packageJSON.devServer.serverPort;
+const CLIENT_PORT = packageJSON.devServer.clientPort;
 const APP_HOST = packageJSON.devServer.appHost;
 
 const BLUE_ANSI = '\x1b[36m%s\x1b[0m';
@@ -20,10 +21,14 @@ const bypassProxyIf = [
   (request) => request.url.startsWith('/oauth'),
 ];
 
+/**
+ * @type {import('webpack').Configuration}
+ */
 module.exports = merge(common, {
   mode: 'development',
   devtool: 'eval-cheap-module-source-map',
   devServer: {
+    port: CLIENT_PORT,
     allowedHosts: [`.${APP_HOST}`],
     historyApiFallback: true,
     devMiddleware: {

client/webpack.dev.js

@@ -1,23 +1,38 @@
 const { merge } = require('webpack-merge');
 const TerserPlugin = require('terser-webpack-plugin');
 const MomentTimezoneDataPlugin = require('moment-timezone-data-webpack-plugin');
+const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin');
 
 const common = require('./webpack.common');
 
 const AVAILABLE_CPUS = +process.env.AVAILABLE_CPUS;
 
+/**
+ * @type {import('webpack').Configuration}
+ */
 module.exports = merge(common, {
   mode: 'production',
   devtool: 'source-map',
   output: {
     filename: '[name]-[contenthash].js',
     publicPath: '/static/',
+    clean: true,
+  },
+  cache: {
+    type: 'filesystem',
   },
   optimization: {
     usedExports: true,
     minimizer: [
       new TerserPlugin({
         parallel: AVAILABLE_CPUS || true,
+        minify: TerserPlugin.swcMinify,
+        extractComments: false,
+        terserOptions: {
+          compress: true,
+          mangle: true,
+          format: { comments: false },
+        },
       }),
     ],
   },
@@ -30,5 +45,27 @@ module.exports = merge(common, {
       },
     ],
   },
-  plugins: [new MomentTimezoneDataPlugin({ startYear: 2014 })],
+  plugins: [
+    new MomentTimezoneDataPlugin({ startYear: 2014 }),
+    new ImageMinimizerPlugin({
+      test: /\.(jpe?g|png|gif)$/i,
+      minimizer: {
+        implementation: ImageMinimizerPlugin.sharpMinify,
+        options: {
+          encodeOptions: {
+            png: {
+              quality: 90,
+              compressionLevel: 9,
+            },
+          },
+        },
+      },
+    }),
+    new ImageMinimizerPlugin({
+      test: /\.svg$/i,
+      minimizer: {
+        implementation: ImageMinimizerPlugin.svgoMinify,
+      },
+    }),
+  ],
 });