diff --git a/config/vite.config.js b/config/vite.config.js index 3a9a296c..9a0c97d3 100644 --- a/config/vite.config.js +++ b/config/vite.config.js @@ -2,6 +2,7 @@ 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"); @@ -17,6 +18,12 @@ export default defineConfig({ visualizer({ filename: "tmp/dist-stats.html" }), + viteCompression({ + algorithm: "gzip", + }), + viteCompression({ + algorithm: "brotliCompress", + }), ], css: { postcss: { @@ -28,14 +35,10 @@ export default defineConfig({ build: { rollupOptions: { output: { - manualChunks(id) { - if (id.includes("src/pages/StatusPage.vue")) { - return "StatusPage"; - } else { - console.log(id); - } + manualChunks(id, { getModuleInfo, getModuleIds }) { + } } - } + }, } }); diff --git a/package-lock.json b/package-lock.json index 974d057b..438d655f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -33,6 +33,7 @@ "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", @@ -102,6 +103,7 @@ "stylelint-config-standard": "~25.0.0", "typescript": "~4.4.4", "vite": "~2.9.9", + "vite-plugin-compression": "^0.5.1", "wait-on": "^6.0.1" }, "engines": { @@ -7565,6 +7567,14 @@ "basic-auth": "^2.0.1" } }, + "node_modules/express-static-gzip": { + "version": "2.1.7", + "resolved": "https://registry.npmjs.org/express-static-gzip/-/express-static-gzip-2.1.7.tgz", + "integrity": "sha512-QOCZUC+lhPPCjIJKpQGu1Oa61Axg9Mq09Qvit8Of7kzpMuwDeMSqjjQteQS3OVw/GkENBoSBheuQDWPlngImvw==", + "dependencies": { + "serve-static": "^1.14.1" + } + }, "node_modules/express/node_modules/debug": { "version": "2.6.9", "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz", @@ -8076,6 +8086,29 @@ "node": ">=0.10.0" } }, + "node_modules/fs-extra": { + "version": "10.1.0", + "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-10.1.0.tgz", + "integrity": "sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==", + "dev": true, + "dependencies": { + "graceful-fs": "^4.2.0", + "jsonfile": "^6.0.1", + "universalify": "^2.0.0" + }, + "engines": { + "node": ">=12" + } + }, + "node_modules/fs-extra/node_modules/universalify": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz", + "integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==", + "dev": true, + "engines": { + "node": ">= 10.0.0" + } + }, "node_modules/fs-minipass": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/fs-minipass/-/fs-minipass-2.1.0.tgz", @@ -11340,6 +11373,27 @@ "node": ">=6" } }, + "node_modules/jsonfile": { + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz", + "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==", + "dev": true, + "dependencies": { + "universalify": "^2.0.0" + }, + "optionalDependencies": { + "graceful-fs": "^4.1.6" + } + }, + "node_modules/jsonfile/node_modules/universalify": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz", + "integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==", + "dev": true, + "engines": { + "node": ">= 10.0.0" + } + }, "node_modules/jsonlines": { "version": "0.1.1", "resolved": "https://registry.npmjs.org/jsonlines/-/jsonlines-0.1.1.tgz", @@ -16708,6 +16762,90 @@ } } }, + "node_modules/vite-plugin-compression": { + "version": "0.5.1", + "resolved": "https://registry.npmjs.org/vite-plugin-compression/-/vite-plugin-compression-0.5.1.tgz", + "integrity": "sha512-5QJKBDc+gNYVqL/skgFAP81Yuzo9R+EAf19d+EtsMF/i8kFUpNi3J/H01QD3Oo8zBQn+NzoCIFkpPLynoOzaJg==", + "dev": true, + "dependencies": { + "chalk": "^4.1.2", + "debug": "^4.3.3", + "fs-extra": "^10.0.0" + }, + "peerDependencies": { + "vite": ">=2.0.0" + } + }, + "node_modules/vite-plugin-compression/node_modules/ansi-styles": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", + "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", + "dev": true, + "dependencies": { + "color-convert": "^2.0.1" + }, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/chalk/ansi-styles?sponsor=1" + } + }, + "node_modules/vite-plugin-compression/node_modules/chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "dev": true, + "dependencies": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" + } + }, + "node_modules/vite-plugin-compression/node_modules/color-convert": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", + "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", + "dev": true, + "dependencies": { + "color-name": "~1.1.4" + }, + "engines": { + "node": ">=7.0.0" + } + }, + "node_modules/vite-plugin-compression/node_modules/color-name": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", + "dev": true + }, + "node_modules/vite-plugin-compression/node_modules/has-flag": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", + "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", + "dev": true, + "engines": { + "node": ">=8" + } + }, + "node_modules/vite-plugin-compression/node_modules/supports-color": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", + "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", + "dev": true, + "dependencies": { + "has-flag": "^4.0.0" + }, + "engines": { + "node": ">=8" + } + }, "node_modules/vue": { "version": "3.2.31", "resolved": "https://registry.npmjs.org/vue/-/vue-3.2.31.tgz", @@ -23030,6 +23168,14 @@ "basic-auth": "^2.0.1" } }, + "express-static-gzip": { + "version": "2.1.7", + "resolved": "https://registry.npmjs.org/express-static-gzip/-/express-static-gzip-2.1.7.tgz", + "integrity": "sha512-QOCZUC+lhPPCjIJKpQGu1Oa61Axg9Mq09Qvit8Of7kzpMuwDeMSqjjQteQS3OVw/GkENBoSBheuQDWPlngImvw==", + "requires": { + "serve-static": "^1.14.1" + } + }, "extend": { "version": "3.0.2", "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz", @@ -23430,6 +23576,25 @@ "integrity": "sha1-mC1ok6+RjnLQjeyehnP/K1qNat0=", "dev": true }, + "fs-extra": { + "version": "10.1.0", + "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-10.1.0.tgz", + "integrity": "sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==", + "dev": true, + "requires": { + "graceful-fs": "^4.2.0", + "jsonfile": "^6.0.1", + "universalify": "^2.0.0" + }, + "dependencies": { + "universalify": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz", + "integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==", + "dev": true + } + } + }, "fs-minipass": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/fs-minipass/-/fs-minipass-2.1.0.tgz", @@ -25881,6 +26046,24 @@ "integrity": "sha512-1hqLFMSrGHRHxav9q9gNjJ5EXznIxGVO09xQRrwplcS8qs28pZ8s8hupZAmqDwZUmVZ2Qb2jnyPOWcDH8m8dlA==", "dev": true }, + "jsonfile": { + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz", + "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==", + "dev": true, + "requires": { + "graceful-fs": "^4.1.6", + "universalify": "^2.0.0" + }, + "dependencies": { + "universalify": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz", + "integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==", + "dev": true + } + } + }, "jsonlines": { "version": "0.1.1", "resolved": "https://registry.npmjs.org/jsonlines/-/jsonlines-0.1.1.tgz", @@ -29998,6 +30181,68 @@ "rollup": "^2.59.0" } }, + "vite-plugin-compression": { + "version": "0.5.1", + "resolved": "https://registry.npmjs.org/vite-plugin-compression/-/vite-plugin-compression-0.5.1.tgz", + "integrity": "sha512-5QJKBDc+gNYVqL/skgFAP81Yuzo9R+EAf19d+EtsMF/i8kFUpNi3J/H01QD3Oo8zBQn+NzoCIFkpPLynoOzaJg==", + "dev": true, + "requires": { + "chalk": "^4.1.2", + "debug": "^4.3.3", + "fs-extra": "^10.0.0" + }, + "dependencies": { + "ansi-styles": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", + "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", + "dev": true, + "requires": { + "color-convert": "^2.0.1" + } + }, + "chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "dev": true, + "requires": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + } + }, + "color-convert": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", + "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", + "dev": true, + "requires": { + "color-name": "~1.1.4" + } + }, + "color-name": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", + "dev": true + }, + "has-flag": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", + "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", + "dev": true + }, + "supports-color": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", + "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", + "dev": true, + "requires": { + "has-flag": "^4.0.0" + } + } + } + }, "vue": { "version": "3.2.31", "resolved": "https://registry.npmjs.org/vue/-/vue-3.2.31.tgz", diff --git a/package.json b/package.json index db06fb89..9754e15c 100644 --- a/package.json +++ b/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", @@ -84,6 +85,7 @@ "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", @@ -153,6 +155,7 @@ "stylelint-config-standard": "~25.0.0", "typescript": "~4.4.4", "vite": "~2.9.9", + "vite-plugin-compression": "^0.5.1", "wait-on": "^6.0.1" } } diff --git a/server/server.js b/server/server.js index 028f4b67..c7e3a1e2 100644 --- a/server/server.js +++ b/server/server.js @@ -35,7 +35,7 @@ const fs = require("fs"); log.info("server", "Importing 3rd-party libraries"); log.debug("server", "Importing express"); const express = require("express"); -const compression = require("compression"); +const expressStaticGzip = require("express-static-gzip"); log.debug("server", "Importing redbean-node"); const { R } = require("redbean-node"); log.debug("server", "Importing jsonwebtoken"); @@ -127,9 +127,6 @@ const { cloudflaredSocketHandler, autoStart: cloudflaredAutoStart, stop: cloudfl const { proxySocketHandler } = require("./socket-handlers/proxy-socket-handler"); app.use(express.json()); -app.use(compression({ - level: 1 -})); // Global Middleware app.use(function (req, res, next) { @@ -206,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)); diff --git a/src/router.js b/src/router.js index 745ef296..00cc7f26 100644 --- a/src/router.js +++ b/src/router.js @@ -1,19 +1,19 @@ import { createRouter, createWebHistory } from "vue-router"; -const EmptyLayout = () => import("./layouts/EmptyLayout.vue"); -const Layout = () => import("./layouts/Layout.vue"); -const Dashboard = () => import("./pages/Dashboard.vue"); -const DashboardHome = () => import("./pages/DashboardHome.vue"); -const Details = () => import("./pages/Details.vue"); -const EditMonitor = () => import("./pages/EditMonitor.vue"); -const List = () => import("./pages/List.vue"); +import EmptyLayout from "./layouts/EmptyLayout.vue"; +import Layout from "./layouts/Layout.vue"; +import Dashboard from "./pages/Dashboard.vue"; +import DashboardHome from "./pages/DashboardHome.vue"; +import Details from "./pages/Details.vue"; +import EditMonitor from "./pages/EditMonitor.vue"; +import List from "./pages/List.vue"; const Settings = () => import("./pages/Settings.vue"); -const Setup = () => import("./pages/Setup.vue"); -const StatusPage = () => import("./pages/StatusPage.vue"); -const Entry = () => import("./pages/Entry.vue"); -const ManageStatusPage = () => import("./pages/ManageStatusPage.vue"); -const AddStatusPage = () => import("./pages/AddStatusPage.vue"); -const NotFound = () => import("./pages/NotFound.vue"); +import Setup from "./pages/Setup.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 const Appearance = () => import("./components/settings/Appearance.vue");