chore: implement manual chunks, make sentry a dynamic import

Author: Miodec

frontend/src/ts/sentry.ts

@@ -1,17 +1,22 @@
-import * as Sentry from "@sentry/browser";
 import { envConfig } from "./constants/env-config";
 
+async function getSentry(): Promise<typeof import("@sentry/browser")> {
+  return await import("@sentry/browser");
+}
+
 let debug = false;
 
 let activated = false;
 
-export function activateSentry(): void {
+export async function activateSentry(): Promise<void> {
   if (activated) {
     console.warn("Sentry already activated");
     return;
   }
   activated = true;
   console.log("Activating Sentry");
+
+  const Sentry = await getSentry();
   Sentry.init({
     release: envConfig.clientVersion,
     dsn: "https://f50c25dc9dd75304a63776063896a39b@o4509236448133120.ingest.us.sentry.io/4509237217394688",
@@ -105,18 +110,24 @@ export function activateSentry(): void {
   });
 }
 
-export function setUser(uid: string, name: string): void {
+export async function setUser(uid: string, name: string): Promise<void> {
+  if (!activated) return;
+  const Sentry = await getSentry();
   Sentry.setUser({
     id: uid,
     username: name,
   });
 }
 
-export function clearUser(): void {
+export async function clearUser(): Promise<void> {
+  if (!activated) return;
+  const Sentry = await getSentry();
   Sentry.setUser(null);
 }
 
-export function captureException(error: Error): void {
+export async function captureException(error: Error): Promise<void> {
+  if (!activated) return;
+  const Sentry = await getSentry();
   Sentry.captureException(error);
 }
 

frontend/vite.config.prod.js

@@ -4,7 +4,6 @@ import { generatePreviewFonts } from "./scripts/font-preview";
 import { VitePWA } from "vite-plugin-pwa";
 import replace from "vite-plugin-filter-replace";
 import path from "node:path";
-import { splitVendorChunkPlugin } from "vite";
 import childProcess from "child_process";
 import { checker } from "vite-plugin-checker";
 import { writeFileSync } from "fs";
@@ -87,7 +86,6 @@ export default {
         tsconfigPath: path.resolve(__dirname, "./tsconfig.json"),
       },
     }),
-    splitVendorChunkPlugin(),
     ViteMinifyPlugin({}),
     VitePWA({
       // injectRegister: "networkfirst",
@@ -282,6 +280,23 @@ export default {
         },
         chunkFileNames: "js/[name].[hash].js",
         entryFileNames: "js/[name].[hash].js",
+        manualChunks: (id) => {
+          if (id.includes("@sentry")) {
+            return "vendor-sentry";
+          }
+          if (id.includes("jquery")) {
+            return "vendor-jquery";
+          }
+          if (id.includes("@firebase")) {
+            return "vendor-firebase";
+          }
+          if (id.includes("monkeytype/packages")) {
+            return "monkeytype-packages";
+          }
+          if (id.includes("node_modules")) {
+            return "vendor";
+          }
+        },
       },
     },
   },