feat: add/reconfigure vite plugins

Co-authored-by: Copilot <copilot@github.com>

Author: BloomyInDev

.gitignore

@@ -34,3 +34,6 @@ coverage
 
 # Vitest
 __screenshots__/
+
+# Custom
+.vite-webp-cache/

package.json

@@ -43,8 +43,10 @@
         "svgo": "^4.0.1",
         "typescript": "~6.0.2",
         "vite": "^8.0.8",
+        "vite-plugin-compression2": "^2.5.3",
         "vite-plugin-image-optimizer": "^2.0.3",
         "vite-plugin-vue-devtools": "^8.0.3",
+        "vite-plugin-webfont-dl": "^3.12.0",
         "vite-ssg": "^28.2.2",
         "vite-ssg-sitemap": "^0.10.0",
         "vue-tsc": "^3.1.1"

plugins/convertToWebp.ts

@@ -0,0 +1,72 @@
+import { globSync } from "node:fs";
+import sharp from "sharp";
+import path from "node:path";
+import { access, mkdir, rm } from "node:fs/promises";
+import { PluginOption } from "vite";
+
+const plugin: (webpOptions: sharp.WebpOptions) => PluginOption = (webpOptions) => {
+  const generated: string[] = [];
+  const cacheRoot = path.resolve(process.cwd(), ".vite-webp-cache");
+
+  const pathExists = async (file: string): Promise<boolean> => {
+    try {
+      await access(file);
+      return true;
+    } catch {
+      return false;
+    }
+  };
+
+  const toWebpCachePath = (file: string): string => {
+    const relative = path.relative(process.cwd(), file);
+    return path.join(cacheRoot, relative).replace(/\.(jpg|jpeg|png)$/i, ".webp");
+  };
+
+  return {
+    name: "convert-to-webp",
+    apply: "build",
+    enforce: "pre",
+
+    buildStart: async () => {
+      const files = globSync("src/**/*.{jpg,jpeg,png}");
+      for (const file of files) {
+        const out = toWebpCachePath(path.resolve(file));
+        await mkdir(path.dirname(out), { recursive: true });
+        const pathExistsInCache = await pathExists(out);
+        if (!pathExistsInCache) {
+          await sharp(file).webp(webpOptions).toFile(out);
+          generated.push(out);
+          console.log(`✓ ${path.basename(file)} → webp`);
+        }
+      }
+    },
+
+    resolveId: async function (source, importer) {
+      if (/\.(jpg|jpeg|png)$/i.test(source) && importer) {
+        const resolved = await this.resolve(source, importer, { skipSelf: true });
+        if (!resolved?.id) return;
+
+        const cleanId = resolved.id.split("?")[0];
+        const webp = toWebpCachePath(path.resolve(cleanId));
+        const isWebpPathValid = await pathExists(webp);
+        if (isWebpPathValid) return webp;
+      }
+    },
+
+    closeBundle: async () => {
+      for (const file of generated) {
+        if (await pathExists(file)) {
+          await rm(file, { force: true });
+          console.log(`🗑 ${path.basename(file)} supprimé`);
+        }
+      }
+
+      const doesPathExist = await pathExists(cacheRoot);
+      if (doesPathExist) {
+        await rm(cacheRoot, { recursive: true, force: true });
+      }
+    },
+  };
+};
+
+export default plugin;

src/styles/main.css

@@ -1,5 +1,3 @@
-@import url("https://fonts.googleapis.com/css2?family=Fira+Sans&display=swap");
-
 :root {
     background-image: linear-gradient(115deg, #004094 50%, #00f7ff);
     font-family: "Fira Sans", sans-serif;

vite.config.ts

@@ -1,21 +1,22 @@
 import { fileURLToPath, URL } from "node:url"
 import fs from "fs/promises"
 
-import { PluginOption, UserConfig } from "vite"
+import { UserConfig } from "vite"
 import { ViteSSGOptions } from "vite-ssg"
 import generateSitemap from "vite-ssg-sitemap"
 import vue from "@vitejs/plugin-vue"
 import vueDevTools from "vite-plugin-vue-devtools"
 import { ViteImageOptimizer as viteImageOptimizer } from "vite-plugin-image-optimizer"
+import convertToWebp from "./plugins/convertToWebp"
+import webfontDownload from "vite-plugin-webfont-dl"
+import { compression, defineAlgorithm } from "vite-plugin-compression2"
+import zlib from "zlib"
 
 import { projects } from "./src/script/projects"
 import type { CustomRouteMetadata } from "./src/types"
 import type { RouteRecordRaw } from "vue-router"
 
 import * as child from "child_process"
-import { globSync } from "node:fs"
-import path from "node:path"
-import sharp from "sharp"
 
 type ViteImageOptimizerOptions = Required<NonNullable<Parameters<typeof viteImageOptimizer>[0]>>
 
@@ -30,57 +31,6 @@ const imageOptimizerOptions: Pick<
     avif: { quality: 75 },
 }
 
-const convertToWebp: (webpOptions: sharp.WebpOptions) => PluginOption = (webpOptions) => {
-    const generated: string[] = []
-
-    return {
-        name: "convert-to-webp",
-        apply: "build",
-        enforce: "pre",
-
-        buildStart: async () => {
-            const files = globSync("src/**/*.{jpg,jpeg,png}")
-            for (const file of files) {
-                const out = file.replace(/\.(jpg|jpeg|png)$/, ".webp")
-
-                try {
-                    await fs.access(out)
-                    // File exists, do nothing
-                } catch {
-                    // File doesn't exist, generate it
-                    await sharp(file).webp(webpOptions).toFile(out)
-                    generated.push(out)
-                    console.log(`✓ ${path.basename(file)} → webp`)
-                }
-            }
-        },
-
-        resolveId: async (source, importer) => {
-            if (/\.(jpg|jpeg|png)$/.test(source) && importer) {
-                const dir = path.dirname(importer)
-                const resolved = path.resolve(dir, source)
-                const webp = resolved.replace(/\.(jpg|jpeg|png)$/, ".webp")
-
-                try {
-                    await fs.access(webp)
-                    // File exists, redirect to webp version
-                    return webp
-                } catch {
-                    // File doesn't exist, do nothing
-                }
-            }
-        },
-
-        closeBundle: async () => {
-            await Promise.all(
-                generated.map((file) =>
-                    fs.rm(file).then(() => console.log(`🗑 ${path.basename(file)} deleted`)),
-                ),
-            )
-        },
-    }
-}
-
 const badUA = await fs.readFile("src/knownBadUA.txt", "utf-8")
 
 process.env.VITE_GIT_COMMIT_HASH = child.execSync("git rev-parse --short HEAD").toString()
@@ -95,6 +45,13 @@ export default {
         vueDevTools(),
         convertToWebp(imageOptimizerOptions.webp),
         viteImageOptimizer(imageOptimizerOptions),
+        webfontDownload(["https://fonts.googleapis.com/css2?family=Fira+Sans&display=swap"]),
+        compression({
+            algorithms: [
+                "gzip",
+                defineAlgorithm("br", { params: { [zlib.constants.BROTLI_PARAM_QUALITY]: 11 } }),
+            ],
+        }),
     ],
     resolve: {
         alias: {