perf: improve page loading time

gulpfile.js

@@ -0,0 +1,58 @@
+const { src, dest } = require("gulp");
+const uglify = require("gulp-uglify");
+const concat = require("gulp-concat");
+var order = require("gulp-order");
+const cleanCss = require("gulp-clean-css");
+
+function defaultTask(cb) {
+  const jsFiles = [
+    "public/script/external/angular.min.js",
+    "public/script/external/angular-translate.min.js",
+    "public/script/external/angular-translate-loader-static-files.min.js",
+    "public/script/external/angular-sanitize.min.js",
+    "public/script/external/angular-route.min.js",
+    "public/script/external/pdf.compat.js",
+    "public/script/external/pdf.js",
+    "public/script/external/github-emojis.js",
+    "public/script/external/marked-emoji.js",
+    "public/script/external/marked.min.js",
+    "public/script/external/purify.min.js",
+    "public/script/external/ansi_up.min.js",
+    "public/script/external/prism.min.js",
+    "public/script/external/katex.min.js",
+    "public/script/external/katex-auto-render.min.js",
+    "public/script/external/notebook.min.js",
+    "public/script/external/org.js",
+    "public/script/external/jquery-3.4.1.min.js",
+    "public/script/external/popper.min.js",
+    "public/script/external/bootstrap.min.js",
+    "public/script/external/ace/ace.js",
+    "public/script/external/ui-ace.min.js",
+    "public/script/utils.js",
+    "public/script/ng-pdfviewer.min.js",
+    "public/script/app.js",
+    "public/script/admin.js",
+  ];
+  const cssFiles = [
+    "public/css/bootstrap.min.css",
+    "public/css/font-awesome.min.css",
+    "public/css/notebook.css",
+    "public/css/katex.min.css",
+    "public/css/github-markdown.min.css",
+    "public/css/style.css",
+  ];
+  src(jsFiles)
+    .pipe(order(jsFiles, { base: "./" }))
+    .pipe(concat("bundle.min.js"))
+    .pipe(uglify())
+    .pipe(dest("public/script"))
+    .on("end", cb);
+
+  src(cssFiles)
+    .pipe(order(cssFiles, { base: "./" }))
+    .pipe(concat("all.min.css"))
+    .pipe(cleanCss())
+    .pipe(dest("public/css"));
+}
+
+exports.default = defaultTask;

package.json

@@ -9,7 +9,7 @@
     "test": "mocha --reporter spec",
     "start": "node --inspect=5858 -r ts-node/register ./src/server/index.ts",
     "dev": "nodemon --transpile-only ./src/server/index.ts",
-    "build": "rm -rf build && tsc",
+    "build": "rm -rf build && tsc && gulp",
     "knip": "knip"
   },
   "repository": {
@@ -85,6 +85,11 @@
     "@types/passport": "^1.0.16",
     "@types/passport-github2": "^1.2.9",
     "@types/unzip-stream": "^0.3.4",
+    "gulp": "^5.0.0",
+    "gulp-clean-css": "^4.3.0",
+    "gulp-concat": "^2.6.1",
+    "gulp-order": "^1.2.0",
+    "gulp-uglify": "^3.0.2",
     "knip": "^5.1.0",
     "mocha": "^10.4.0",
     "nodemon": "^3.1.0",

public/favicon/site.webmanifest

@@ -3,12 +3,12 @@
     "short_name": "Anonymous Github",
     "icons": [
         {
-            "src": "/android-chrome-192x192.png",
+            "src": "/favicon/android-chrome-192x192.png",
             "sizes": "192x192",
             "type": "image/png"
         },
         {
-            "src": "/android-chrome-256x256.png",
+            "src": "/favicon/android-chrome-256x256.png",
             "sizes": "256x256",
             "type": "image/png"
         }

public/index.html

@@ -33,54 +33,7 @@
     <meta name="msapplication-config" content="/favicon/browserconfig.xml" />
     <meta name="theme-color" content="#ffffff" />
 
-    <!-- CSS -->
+    <link rel="stylesheet" href="/css/all.min.css" />
-    <link rel="stylesheet" href="/css/bootstrap.min.css" />
-    <link rel="stylesheet" href="/css/font-awesome.min.css" />
-
-    <link rel="stylesheet" href="/css/color-schema.css" />
-    <link rel="stylesheet" href="/css/style.css" />
-    <link rel="stylesheet" href="/css/notebook.css" />
-    <link rel="stylesheet" href="/css/katex.min.css" />
-    <link rel="stylesheet" href="/css/github-markdown.min.css" />
-
-    <!-- JS -->
-    <script src="/script/external/angular.min.js"></script>
-    <script src="/script/external/angular-translate.min.js"></script>
-    <script src="/script/external/angular-translate-loader-static-files.min.js"></script>
-    <script src="/script/external/angular-sanitize.min.js"></script>
-    <script src="/script/external/angular-route.min.js"></script>
-
-    <script src="/script/external/jquery-3.4.1.min.js"></script>
-    <script src="/script/external/popper.min.js"></script>
-    <script src="/script/external/bootstrap.min.js"></script>
-
-    <!-- PDF -->
-    <script src="/script/external/pdf.compat.js"></script>
-    <script src="/script/external/pdf.js"></script>
-
-    <!-- Code -->
-    <script src="/script/external/ace/ace.js"></script>
-    <script src="/script/external/ui-ace.min.js"></script>
-    <script src="/script/langColors.js"></script>
-
-    <!-- Notebook -->
-    <script src="/script/external/github-emojis.js"></script>
-    <script src="/script/external/marked-emoji.js"></script>
-    <script src="/script/external/marked.min.js"></script>
-    <script src="/script/external/purify.min.js"></script>
-    <script src="/script/external/ansi_up.min.js"></script>
-    <script src="/script/external/prism.min.js"></script>
-    <script src="/script/external/katex.min.js"></script>
-    <script src="/script/external/katex-auto-render.min.js"></script>
-    <script src="/script/external/notebook.min.js"></script>
-
-    <script src="/script/external/org.js"></script>
-
-    <!-- Anonymous GitHub scripts -->
-    <script src="/script/utils.js"></script>
-    <script src="/script/ng-pdfviewer.min.js"></script>
-    <script src="/script/admin.js"></script>
-    <script src="/script/app.js"></script>
   </head>
   <body keypress-events class="d-flex flex-column">
     <ng-include src="'partials/header.htm'"></ng-include>
@@ -115,6 +68,11 @@
       </div>
     </div>
 
+    <script src="/script/bundle.min.js"></script>
+    <script>
+      ace.config.set("basePath", "/script/external/ace/");
+      PDFJS.workerSrc = "/script/external/pdf.worker.js";
+    </script>
     <script src="https://storage.ko-fi.com/cdn/scripts/overlay-widget.js"></script>
     <script>
       kofiWidgetOverlay.draw("tdurieux", {

public/script/app.js

@@ -7,7 +7,11 @@ angular
     "pascalprecht.translate",
     "admin",
   ])
-  .config(function ($routeProvider, $locationProvider, $translateProvider) {
+  .config([
+    "$routeProvider",
+    "$locationProvider",
+    "$translateProvider",
+    function ($routeProvider, $locationProvider, $translateProvider) {
       $translateProvider.useStaticFilesLoader({
         prefix: "/i18n/locale-",
         suffix: ".json",
@@ -133,7 +137,8 @@ angular
           title: "Page not found - Anonymous GitHub",
         });
       $locationProvider.html5Mode(true);
-  })
+    },
+  ])
   .filter("humanFileSize", function () {
     return humanFileSize;
   })
@@ -2442,28 +2447,3 @@ angular
       getConference();
     },
   ]);
-function humanFileSize(bytes, si = false, dp = 1) {
-  const thresh = si ? 1000 : 1024;
-
-  bytes = bytes / 8;
-
-  if (Math.abs(bytes) < thresh) {
-    return bytes + "B";
-  }
-
-  const units = si
-    ? ["kB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"]
-    : ["KiB", "MiB", "GiB", "TiB", "PiB", "EiB", "ZiB", "YiB"];
-  let u = -1;
-  const r = 10 ** dp;
-
-  do {
-    bytes /= thresh;
-    ++u;
-  } while (
-    Math.round(Math.abs(bytes) * r) / r >= thresh &&
-    u < units.length - 1
-  );
-
-  return bytes.toFixed(dp) + "" + units[u];
-}

public/script/utils.js

@@ -1,3 +1,29 @@
+function humanFileSize(bytes, si = false, dp = 1) {
+  const thresh = si ? 1000 : 1024;
+
+  bytes = bytes / 8;
+
+  if (Math.abs(bytes) < thresh) {
+    return bytes + "B";
+  }
+
+  const units = si
+    ? ["kB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"]
+    : ["KiB", "MiB", "GiB", "TiB", "PiB", "EiB", "ZiB", "YiB"];
+  let u = -1;
+  const r = 10 ** dp;
+
+  do {
+    bytes /= thresh;
+    ++u;
+  } while (
+    Math.round(Math.abs(bytes) * r) / r >= thresh &&
+    u < units.length - 1
+  );
+
+  return bytes.toFixed(dp) + "" + units[u];
+}
+
 function urlRel2abs(url) {
   /* Only accept commonly trusted protocols:
    * Only data-image URLs are accepted, Exotic flavours (escaped slash,
@@ -110,14 +136,13 @@ function parseGithubUrl(url) {
   }
 }
 
-marked.use(
+function renderMD(md, baseUrlValue) {
+  marked.use(
     markedEmoji({
       emojis: githubEmojis,
       unicode: false,
     })
-);
+  );
-
-function renderMD(md, baseUrlValue) {
   md = contentAbs2Relative(md);
   const renderer = new marked.Renderer();