Dynamic imports for most routes, for better chunk size

CHANGELOG.md

@@ -16,6 +16,7 @@ As this project is a user-facing application, the places in the semantic version
 ### Added
 
 - Basic functionality for adding and removing metadata resources [#145](https://github.com/spraakbanken/mink-frontend/issues/145)
+- Some dynamic imports to reduce main chunk size
 
 ### Changed
 

src/router/corpus.routes.ts

@@ -1,12 +1,13 @@
 import { type RouteRecordRaw } from "vue-router";
-import CreateCorpus from "@/corpus/CreateCorpus.vue";
-import CorpusView from "@/corpus/CorpusView.vue";
-import CorpusOverview from "@/corpus/CorpusOverview.vue";
-import CorpusMetadata from "@/corpus/config/CorpusMetadata.vue";
-import CorpusConfiguration from "@/corpus/config/CorpusConfiguration.vue";
-import CorpusResult from "@/corpus/exports/CorpusResult.vue";
-import CorpusDelete from "@/corpus/CorpusDelete.vue";
-import SourceView from "@/corpus/sources/SourceView.vue";
+const CreateCorpus = () => import("@/corpus/CreateCorpus.vue");
+const CorpusView = () => import("@/corpus/CorpusView.vue");
+const CorpusOverview = () => import("@/corpus/CorpusOverview.vue");
+const CorpusMetadata = () => import("@/corpus/config/CorpusMetadata.vue");
+const CorpusConfiguration = () =>
+  import("@/corpus/config/CorpusConfiguration.vue");
+const CorpusResult = () => import("@/corpus/exports/CorpusResult.vue");
+const CorpusDelete = () => import("@/corpus/CorpusDelete.vue");
+const SourceView = () => import("@/corpus/sources/SourceView.vue");
 
 const corpusRoutes: RouteRecordRaw[] = [
   { path: "/corpus", redirect: "/library" },

src/router/main.routes.ts

@@ -1,9 +1,9 @@
 import { type RouteRecordRaw } from "vue-router";
 import HomeView from "@/home/HomeView.vue";
-import LibraryView from "@/library/LibraryView.vue";
+const LibraryView = () => import("@/library/LibraryView.vue");
 import LoginView from "@/auth/LoginView.vue";
 import SignupView from "@/auth/SignupView.vue";
-import UserView from "@/user/UserView.vue";
+const UserView = () => import("@/user/UserView.vue");
 import AccessDenied from "@/auth/AccessDenied.vue";
 import NotFound from "@/page/NotFound.vue";
 import corpusRoutes from "./corpus.routes";

src/router/metadata.routes.ts

@@ -1,8 +1,8 @@
 import { type RouteRecordRaw } from "vue-router";
-import MetadataView from "@/metadata/MetadataView.vue";
-import MetadataOverview from "@/metadata/MetadataOverview.vue";
-import CreateMetadata from "@/metadata/CreateMetadata.vue";
-import MetadataDelete from "@/metadata/MetadataDelete.vue";
+const MetadataView = () => import("@/metadata/MetadataView.vue");
+const MetadataOverview = () => import("@/metadata/MetadataOverview.vue");
+const CreateMetadata = () => import("@/metadata/CreateMetadata.vue");
+const MetadataDelete = () => import("@/metadata/MetadataDelete.vue");
 
 const metadataRoutes: RouteRecordRaw[] = [
   {

vite.config.ts

@@ -42,5 +42,12 @@ export default defineConfig(async ({ mode }) => {
     test: {
       environment: "happy-dom",
     },
+    build: {
+      rollupOptions: {
+        output: {
+          experimentalMinChunkSize: 5000,
+        },
+      },
+    },
   };
 });