From 60eddbadddd90a6a628e82034edb135aacb6820a Mon Sep 17 00:00:00 2001
From: Arild Matsson <arild.matsson@gu.se>
Date: Wed, 14 Feb 2024 17:53:32 +0100
Subject: [PATCH] Dynamic imports for most routes, for better chunk size

---
 CHANGELOG.md                  |  1 +
 src/router/corpus.routes.ts   | 17 +++++++++--------
 src/router/main.routes.ts     |  4 ++--
 src/router/metadata.routes.ts |  8 ++++----
 vite.config.ts                |  7 +++++++
 5 files changed, 23 insertions(+), 14 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index d200b40..75e1f4c 100644
--- a/CHANGELOG.md
+++ b/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
 
diff --git a/src/router/corpus.routes.ts b/src/router/corpus.routes.ts
index fa093fb..e372fd4 100644
--- a/src/router/corpus.routes.ts
+++ b/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" },
diff --git a/src/router/main.routes.ts b/src/router/main.routes.ts
index a82830d..875b290 100644
--- a/src/router/main.routes.ts
+++ b/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";
diff --git a/src/router/metadata.routes.ts b/src/router/metadata.routes.ts
index d7fc363..27fa438 100644
--- a/src/router/metadata.routes.ts
+++ b/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[] = [
   {
diff --git a/vite.config.ts b/vite.config.ts
index 723d7b5..9d0cd09 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -42,5 +42,12 @@ export default defineConfig(async ({ mode }) => {
     test: {
       environment: "happy-dom",
     },
+    build: {
+      rollupOptions: {
+        output: {
+          experimentalMinChunkSize: 5000,
+        },
+      },
+    },
   };
 });