Page Loading Speed Optimization (#1711)

* Update Vite.js to 2.9.9 and add Rollup Plugin Visualizer
* Prebuild gzip and brotli for assets

Original: ~1.2MB
Optimized: ~370KB

config/vite.config.js

@@ -1,6 +1,8 @@
 import legacy from "@vitejs/plugin-legacy";
 import vue from "@vitejs/plugin-vue";
 import { defineConfig } from "vite";
+import visualizer from "rollup-plugin-visualizer";
+import viteCompression from "vite-plugin-compression";
 
 const postCssScss = require("postcss-scss");
 const postcssRTLCSS = require("postcss-rtlcss");
@@ -12,7 +14,16 @@ export default defineConfig({
         legacy({
             targets: [ "ie > 11" ],
             additionalLegacyPolyfills: [ "regenerator-runtime/runtime" ]
-        })
+        }),
+        visualizer({
+            filename: "tmp/dist-stats.html"
+        }),
+        viteCompression({
+            algorithm: "gzip",
+        }),
+        viteCompression({
+            algorithm: "brotliCompress",
+        }),
     ],
     css: {
         postcss: {
@@ -21,4 +32,13 @@ export default defineConfig({
             "plugins": [ postcssRTLCSS ]
         }
     },
+    build: {
+        rollupOptions: {
+            output: {
+                manualChunks(id, { getModuleInfo, getModuleIds }) {
+
+                }
+            }
+        },
+    }
 });

package.json

@@ -57,7 +57,8 @@
         "ncu-patch": "npm-check-updates -u -t patch",
         "release-final": "node extra/update-version.js && npm run build-docker && node ./extra/press-any-key.js && npm run upload-artifacts && node ./extra/update-wiki-version.js",
         "release-beta": "node extra/beta/update-version.js && npm run build && node ./extra/env2arg.js docker buildx build -f docker/dockerfile --platform linux/amd64,linux/arm64,linux/arm/v7 -t louislam/uptime-kuma:$VERSION -t louislam/uptime-kuma:beta .  --target release --push && node ./extra/press-any-key.js && npm run upload-artifacts",
-        "git-remove-tag": "git tag -d"
+        "git-remove-tag": "git tag -d",
+        "build-dist-and-restart": "npm run build && npm run start-server-dev"
     },
     "dependencies": {
         "@fortawesome/fontawesome-svg-core": "~1.2.36",
@@ -80,9 +81,11 @@
         "chroma-js": "^2.1.2",
         "command-exists": "~1.2.9",
         "compare-versions": "~3.6.0",
+        "compression": "^1.7.4",
         "dayjs": "^1.11.0",
         "express": "~4.17.3",
         "express-basic-auth": "~1.2.1",
+        "express-static-gzip": "^2.1.7",
         "favico.js": "^0.3.10",
         "form-data": "~4.0.0",
         "http-graceful-shutdown": "~3.1.7",
@@ -130,9 +133,9 @@
         "@babel/eslint-parser": "~7.17.0",
         "@babel/preset-env": "^7.15.8",
         "@types/bootstrap": "~5.1.9",
-        "@vitejs/plugin-legacy": "~1.6.4",
+        "@vitejs/plugin-legacy": "~1.8.2",
-        "@vitejs/plugin-vue": "~1.9.4",
+        "@vitejs/plugin-vue": "~2.3.3",
-        "@vue/compiler-sfc": "~3.2.31",
+        "@vue/compiler-sfc": "~3.2.36",
         "aedes": "^0.46.3",
         "babel-plugin-rewire": "~1.2.0",
         "concurrently": "^7.1.0",
@@ -146,11 +149,13 @@
         "npm-check-updates": "^12.5.9",
         "postcss-html": "^1.3.1",
         "puppeteer": "~13.1.3",
+        "rollup-plugin-visualizer": "^5.6.0",
         "sass": "~1.42.1",
         "stylelint": "~14.7.1",
         "stylelint-config-standard": "~25.0.0",
         "typescript": "~4.4.4",
-        "vite": "~2.6.14",
+        "vite": "~2.9.9",
+        "vite-plugin-compression": "^0.5.1",
         "wait-on": "^6.0.1"
     }
 }

server/server.js

@@ -35,6 +35,7 @@ const fs = require("fs");
 log.info("server", "Importing 3rd-party libraries");
 log.debug("server", "Importing express");
 const express = require("express");
+const expressStaticGzip = require("express-static-gzip");
 log.debug("server", "Importing redbean-node");
 const { R } = require("redbean-node");
 log.debug("server", "Importing jsonwebtoken");
@@ -202,7 +203,9 @@ let needSetup = false;
     // With Basic Auth using the first user's username/password
     app.get("/metrics", basicAuth, prometheusAPIMetrics());
 
-    app.use("/", express.static("dist"));
+    app.use("/", expressStaticGzip("dist", {
+        enableBrotli: true,
+    }));
 
     // ./data/upload
     app.use("/upload", express.static(Database.uploadDir));

src/router.js

@@ -1,4 +1,5 @@
 import { createRouter, createWebHistory } from "vue-router";
+
 import EmptyLayout from "./layouts/EmptyLayout.vue";
 import Layout from "./layouts/Layout.vue";
 import Dashboard from "./pages/Dashboard.vue";
@@ -8,21 +9,22 @@ import EditMonitor from "./pages/EditMonitor.vue";
 import List from "./pages/List.vue";
 const Settings = () => import("./pages/Settings.vue");
 import Setup from "./pages/Setup.vue";
-const StatusPage = () => import("./pages/StatusPage.vue");
+import StatusPage from "./pages/StatusPage.vue";
 import Entry from "./pages/Entry.vue";
+import ManageStatusPage from "./pages/ManageStatusPage.vue";
+import AddStatusPage from "./pages/AddStatusPage.vue";
+import NotFound from "./pages/NotFound.vue";
 
+// Settings - Sub Pages
 import Appearance from "./components/settings/Appearance.vue";
 import General from "./components/settings/General.vue";
-import Notifications from "./components/settings/Notifications.vue";
+const Notifications = () => import("./components/settings/Notifications.vue");
 import ReverseProxy from "./components/settings/ReverseProxy.vue";
 import MonitorHistory from "./components/settings/MonitorHistory.vue";
-import Security from "./components/settings/Security.vue";
+const Security = () => import("./components/settings/Security.vue");
 import Proxies from "./components/settings/Proxies.vue";
 import Backup from "./components/settings/Backup.vue";
 import About from "./components/settings/About.vue";
-import ManageStatusPage from "./pages/ManageStatusPage.vue";
-import AddStatusPage from "./pages/AddStatusPage.vue";
-import NotFound from "./pages/NotFound.vue";
 
 const routes = [
     {