feat: add compression (#317)

* feat: add compression

* pkg: lock compression

Author: danstarns

.github/workflows/deploy-landing-page.yml

@@ -28,5 +28,5 @@ jobs:
             cd ./docs/
             pm2 restart graphql-debugger.com
             cd ../apps/ui
-            DEMO_MODE=true pnpm build
+            NODE_ENV=production DEMO_MODE=true pnpm build
             pm2 restart demo

apps/backend/package.json

@@ -18,14 +18,15 @@
     "dev": "cross-env TRACE_SCHEMA=true TRACE_PRISMA=true TRACE_EXPRESS=true ts-node ./src/main.ts"
   },
   "dependencies": {
-    "@graphql-debugger/client": "workspace:^",
     "@graphql-debugger/adapter-sqlite": "workspace:^",
+    "@graphql-debugger/client": "workspace:^",
     "@graphql-debugger/graphql-schema": "workspace:^",
     "@graphql-debugger/plugin-express": "workspace:^",
     "@graphql-debugger/ui": "workspace:^",
     "@graphql-debugger/utils": "workspace:^",
     "cors": "2.8.5",
-    "express": "4.19.2"
+    "express": "4.19.2",
+    "express-static-gzip": "2.1.7"
   },
   "devDependencies": {
     "@types/cors": "2.8.17",

apps/backend/src/index.ts

@@ -4,6 +4,7 @@ import { graphqlDebugger } from "@graphql-debugger/plugin-express";
 
 import cors from "cors";
 import express, { Express } from "express";
+import expressStaticGzip from "express-static-gzip";
 import http from "http";
 import path from "path";
 
@@ -30,7 +31,12 @@ export async function start({
         client,
       }),
     );
-    app.use(express.static(path.join(__dirname, "../../ui/build")));
+    app.use(
+      "/",
+      expressStaticGzip(path.join(__dirname, "../../ui/build"), {
+        enableBrotli: true,
+      }),
+    );
     app.use(express.static("public"));
 
     const server = await app.listen(port);

apps/ui/package.json

@@ -47,7 +47,8 @@
   },
   "devDependencies": {
     "@faker-js/faker": "8.4.1",
-    "@graphql-debugger/types": "workspace:^"
+    "@graphql-debugger/types": "workspace:^",
+    "compression-webpack-plugin": "11.1.0"
   },
   "engines": {
     "node": ">=18",

apps/ui/webpack.config.js

@@ -4,6 +4,7 @@ const HtmlWebpackPlugin = require("html-webpack-plugin");
 const CopyWebpackPlugin = require("copy-webpack-plugin");
 const { CleanWebpackPlugin } = require("clean-webpack-plugin");
 const NodePolyfillPlugin = require("node-polyfill-webpack-plugin");
+const CompressionPlugin = require("compression-webpack-plugin");
 
 module.exports = {
   mode: "none",
@@ -73,6 +74,13 @@ module.exports = {
       favicon: "./public/favicon.svg",
     }),
     new NodePolyfillPlugin(),
+    ...(process.env.NODE_ENV === "production"
+      ? [
+          new CompressionPlugin({
+            deleteOriginalAssets: true,
+          }),
+        ]
+      : []),
   ],
   devServer: {
     static: {