diff --git a/js/src/router/actor.ts b/js/src/router/actor.ts
index 012dc67ae..28c6e8669 100644
--- a/js/src/router/actor.ts
+++ b/js/src/router/actor.ts
@@ -1,7 +1,4 @@
 import { RouteConfig } from "vue-router";
-import CreateGroup from "@/views/Group/Create.vue";
-import Group from "@/views/Group/Group.vue";
-import MyGroups from "@/views/Group/MyGroups.vue";
 
 export enum ActorRouteName {
   GROUP = "Group",
@@ -14,20 +11,20 @@ export const actorRoutes: RouteConfig[] = [
   {
     path: "/groups/create",
     name: ActorRouteName.CREATE_GROUP,
-    component: CreateGroup,
+    component: () => import(/* webpackChunkName: "CreateGroup" */ "@/views/Group/Create.vue"),
     meta: { requiredAuth: true },
   },
   {
     path: "/@:preferredUsername",
     name: ActorRouteName.GROUP,
-    component: Group,
+    component: () => import(/* webpackChunkName: "Group" */ "@/views/Group/Group.vue"),
     props: true,
     meta: { requiredAuth: false },
   },
   {
     path: "/groups/me",
     name: ActorRouteName.MY_GROUPS,
-    component: MyGroups,
+    component: () => import(/* webpackChunkName: "MyGroups" */ "@/views/Group/MyGroups.vue"),
     meta: { requiredAuth: true },
   },
 ];
diff --git a/js/src/router/discussion.ts b/js/src/router/discussion.ts
index 1767c2845..0fb62b373 100644
--- a/js/src/router/discussion.ts
+++ b/js/src/router/discussion.ts
@@ -1,7 +1,4 @@
 import { RouteConfig } from "vue-router";
-import CreateDiscussion from "@/views/Discussions/Create.vue";
-import DiscussionsList from "@/views/Discussions/DiscussionsList.vue";
-import discussion from "@/views/Discussions/Discussion.vue";
 
 export enum DiscussionRouteName {
   DISCUSSION_LIST = "DISCUSSION_LIST",
@@ -13,21 +10,24 @@ export const discussionRoutes: RouteConfig[] = [
   {
     path: "/@:preferredUsername/discussions",
     name: DiscussionRouteName.DISCUSSION_LIST,
-    component: DiscussionsList,
+    component: () =>
+      import(/* webpackChunkName: "DiscussionsList" */ "@/views/Discussions/DiscussionsList.vue"),
     props: true,
     meta: { requiredAuth: false },
   },
   {
     path: "/@:preferredUsername/discussions/new",
     name: DiscussionRouteName.CREATE_DISCUSSION,
-    component: CreateDiscussion,
+    component: () =>
+      import(/* webpackChunkName: "CreateDiscussion" */ "@/views/Discussions/Create.vue"),
     props: true,
     meta: { requiredAuth: true },
   },
   {
     path: "/@:preferredUsername/c/:slug/:comment_id?",
     name: DiscussionRouteName.DISCUSSION,
-    component: discussion,
+    component: () =>
+      import(/* webpackChunkName: "Discussion" */ "@/views/Discussions/Discussion.vue"),
     props: true,
     meta: { requiredAuth: false },
   },
diff --git a/js/src/router/error.ts b/js/src/router/error.ts
index 830226619..fc2f5af17 100644
--- a/js/src/router/error.ts
+++ b/js/src/router/error.ts
@@ -1,6 +1,5 @@
 import { beforeRegisterGuard } from "@/router/guards/register-guard";
 import { RouteConfig } from "vue-router";
-import ErrorPage from "../views/Error.vue";
 
 export enum ErrorRouteName {
   ERROR = "Error",
@@ -10,7 +9,7 @@ export const errorRoutes: RouteConfig[] = [
   {
     path: "/error",
     name: ErrorRouteName.ERROR,
-    component: ErrorPage,
+    component: () => import(/* webpackChunkName: "Error" */ "../views/Error.vue"),
     beforeEnter: beforeRegisterGuard,
   },
 ];
diff --git a/js/src/router/event.ts b/js/src/router/event.ts
index c7ec47cb0..6dbc6addb 100644
--- a/js/src/router/event.ts
+++ b/js/src/router/event.ts
@@ -1,7 +1,4 @@
 import { RouteConfig, Route } from "vue-router";
-import EventList from "../views/Event/EventList.vue";
-import Location from "../views/Location.vue";
-import Search from "../views/Search.vue";
 
 const participations = () =>
   import(/* webpackChunkName: "participations" */ "@/views/Event/Participants.vue");
@@ -29,7 +26,7 @@ export const eventRoutes: RouteConfig[] = [
   {
     path: "/events/list/:location?",
     name: EventRouteName.EVENT_LIST,
-    component: EventList,
+    component: () => import(/* webpackChunkName: "EventList" */ "@/views/Event/EventList.vue"),
     meta: { requiredAuth: false },
   },
   {
@@ -68,7 +65,7 @@ export const eventRoutes: RouteConfig[] = [
   {
     path: "/location/new",
     name: EventRouteName.LOCATION,
-    component: Location,
+    component: () => import(/* webpackChunkName: "Location" */ "@/views/Location.vue"),
     meta: { requiredAuth: true },
   },
   {
@@ -105,7 +102,7 @@ export const eventRoutes: RouteConfig[] = [
   {
     path: "/tag/:tag",
     name: EventRouteName.TAG,
-    component: Search,
+    component: () => import(/* webpackChunkName: "Search" */ "@/views/Search.vue"),
     props: true,
     meta: { requiredAuth: false },
   },
diff --git a/js/src/router/index.ts b/js/src/router/index.ts
index 2ce385548..6412f937d 100644
--- a/js/src/router/index.ts
+++ b/js/src/router/index.ts
@@ -2,13 +2,11 @@ import Vue from "vue";
 import Router, { Route } from "vue-router";
 import VueScrollTo from "vue-scrollto";
 import { PositionResult } from "vue-router/types/router.d";
-import PageNotFound from "../views/PageNotFound.vue";
 import Home from "../views/Home.vue";
 import { eventRoutes } from "./event";
 import { actorRoutes } from "./actor";
 import { errorRoutes } from "./error";
 import { authGuardIfNeeded } from "./guards/auth-guard";
-import Search from "../views/Search.vue";
 import { settingsRoutes } from "./settings";
 import { groupsRoutes } from "./groups";
 import { discussionRoutes } from "./discussion";
@@ -51,7 +49,7 @@ const router = new Router({
     {
       path: "/search",
       name: RouteName.SEARCH,
-      component: Search,
+      component: () => import(/* webpackChunkName: "search" */ "../views/Search.vue"),
       props: true,
       meta: { requiredAuth: false },
     },
@@ -115,12 +113,13 @@ const router = new Router({
     {
       path: "/auth/:provider/callback",
       name: "auth-callback",
-      component: () => import("@/views/User/ProviderValidation.vue"),
+      component: () =>
+        import(/* webpackChunkName: "ProviderValidation" */ "@/views/User/ProviderValidation.vue"),
     },
     {
       path: "/404",
       name: RouteName.PAGE_NOT_FOUND,
-      component: PageNotFound,
+      component: () => import(/* webpackChunkName: "search" */ "../views/PageNotFound.vue"),
       meta: { requiredAuth: false },
     },
     {
diff --git a/js/src/router/settings.ts b/js/src/router/settings.ts
index b1cf752de..a2a700713 100644
--- a/js/src/router/settings.ts
+++ b/js/src/router/settings.ts
@@ -1,23 +1,4 @@
 import { RouteConfig } from "vue-router";
-import Settings from "@/views/Settings.vue";
-import AccountSettings from "@/views/Settings/AccountSettings.vue";
-import Preferences from "@/views/Settings/Preferences.vue";
-import Notifications from "@/views/Settings/Notifications.vue";
-import Dashboard from "@/views/Admin/Dashboard.vue";
-import AdminSettings from "@/views/Admin/Settings.vue";
-import Follows from "@/views/Admin/Follows.vue";
-import Followings from "@/components/Admin/Followings.vue";
-import Followers from "@/components/Admin/Followers.vue";
-import ReportList from "@/views/Moderation/ReportList.vue";
-import Report from "@/views/Moderation/Report.vue";
-import Logs from "@/views/Moderation/Logs.vue";
-import EditIdentity from "@/views/Account/children/EditIdentity.vue";
-import Users from "../views/Admin/Users.vue";
-import Profiles from "../views/Admin/Profiles.vue";
-import AdminProfile from "../views/Admin/AdminProfile.vue";
-import AdminUserProfile from "../views/Admin/AdminUserProfile.vue";
-import GroupProfiles from "../views/Admin/GroupProfiles.vue";
-import AdminGroupProfile from "../views/Admin/AdminGroupProfile.vue";
 
 export enum SettingsRouteName {
   SETTINGS = "SETTINGS",
@@ -49,7 +30,7 @@ export enum SettingsRouteName {
 export const settingsRoutes: RouteConfig[] = [
   {
     path: "/settings",
-    component: Settings,
+    component: () => import(/* webpackChunkName: "Settings" */ "@/views/Settings.vue"),
     props: true,
     meta: { requiredAuth: true },
     redirect: { name: SettingsRouteName.ACCOUNT_SETTINGS },
@@ -63,21 +44,24 @@ export const settingsRoutes: RouteConfig[] = [
       {
         path: "account/general",
         name: SettingsRouteName.ACCOUNT_SETTINGS_GENERAL,
-        component: AccountSettings,
+        component: () =>
+          import(/* webpackChunkName: "AccountSettings" */ "@/views/Settings/AccountSettings.vue"),
         props: true,
         meta: { requiredAuth: true },
       },
       {
         path: "preferences",
         name: SettingsRouteName.PREFERENCES,
-        component: Preferences,
+        component: () =>
+          import(/* webpackChunkName: "Preferences" */ "@/views/Settings/Preferences.vue"),
         props: true,
         meta: { requiredAuth: true },
       },
       {
         path: "notifications",
         name: SettingsRouteName.NOTIFICATIONS,
-        component: Notifications,
+        component: () =>
+          import(/* webpackChunkName: "Notifications" */ "@/views/Settings/Notifications.vue"),
         props: true,
         meta: { requiredAuth: true },
       },
@@ -89,55 +73,61 @@ export const settingsRoutes: RouteConfig[] = [
       {
         path: "admin/dashboard",
         name: SettingsRouteName.ADMIN_DASHBOARD,
-        component: Dashboard,
+        component: () => import(/* webpackChunkName: "Dashboard" */ "@/views/Admin/Dashboard.vue"),
         meta: { requiredAuth: true },
       },
       {
         path: "admin/settings",
         name: SettingsRouteName.ADMIN_SETTINGS,
-        component: AdminSettings,
+        component: () =>
+          import(/* webpackChunkName: "AdminSettings" */ "@/views/Admin/Settings.vue"),
         props: true,
         meta: { requiredAuth: true },
       },
       {
         path: "admin/users",
         name: SettingsRouteName.USERS,
-        component: Users,
+        component: () => import(/* webpackChunkName: "Users" */ "@/views/Admin/Users.vue"),
         props: true,
         meta: { requiredAuth: true },
       },
       {
         path: "admin/users/:id",
         name: SettingsRouteName.ADMIN_USER_PROFILE,
-        component: AdminUserProfile,
+        component: () =>
+          import(/* webpackChunkName: "AdminUserProfile" */ "@/views/Admin/AdminUserProfile.vue"),
         props: true,
         meta: { requiredAuth: true },
       },
       {
         path: "admin/profiles",
         name: SettingsRouteName.PROFILES,
-        component: Profiles,
+        component: () =>
+          import(/* webpackChunkName: "AdminProfiles" */ "@/views/Admin/Profiles.vue"),
         props: true,
         meta: { requiredAuth: true },
       },
       {
         path: "admin/profiles/:id",
         name: SettingsRouteName.ADMIN_PROFILE,
-        component: AdminProfile,
+        component: () =>
+          import(/* webpackChunkName: "AdminProfile" */ "@/views/Admin/AdminProfile.vue"),
         props: true,
         meta: { requiredAuth: true },
       },
       {
         path: "admin/groups",
         name: SettingsRouteName.ADMIN_GROUPS,
-        component: GroupProfiles,
+        component: () =>
+          import(/* webpackChunkName: "GroupProfiles" */ "@/views/Admin/GroupProfiles.vue"),
         props: true,
         meta: { requiredAuth: true },
       },
       {
         path: "admin/groups/:id",
         name: SettingsRouteName.ADMIN_GROUP_PROFILE,
-        component: AdminGroupProfile,
+        component: () =>
+          import(/* webpackChunkName: "AdminGroupProfile" */ "@/views/Admin/AdminGroupProfile.vue"),
         props: true,
         meta: { requiredAuth: true },
       },
@@ -145,17 +135,19 @@ export const settingsRoutes: RouteConfig[] = [
         path: "admin/relays",
         name: SettingsRouteName.RELAYS,
         redirect: { name: SettingsRouteName.RELAY_FOLLOWINGS },
-        component: Follows,
+        component: () => import(/* webpackChunkName: "Follows" */ "@/views/Admin/Follows.vue"),
         children: [
           {
             path: "followings",
             name: SettingsRouteName.RELAY_FOLLOWINGS,
-            component: Followings,
+            component: () =>
+              import(/* webpackChunkName: "Followings" */ "@/components/Admin/Followings.vue"),
           },
           {
             path: "followers",
             name: SettingsRouteName.RELAY_FOLLOWERS,
-            component: Followers,
+            component: () =>
+              import(/* webpackChunkName: "Followers" */ "@/components/Admin/Followers.vue"),
           },
         ],
         props: true,
@@ -169,21 +161,23 @@ export const settingsRoutes: RouteConfig[] = [
       {
         path: "/moderation/reports/:filter?",
         name: SettingsRouteName.REPORTS,
-        component: ReportList,
+        component: () =>
+          import(/* webpackChunkName: "ReportList" */ "@/views/Moderation/ReportList.vue"),
         props: true,
         meta: { requiredAuth: true },
       },
       {
         path: "/moderation/report/:reportId",
         name: SettingsRouteName.REPORT,
-        component: Report,
+        component: () => import(/* webpackChunkName: "Report" */ "@/views/Moderation/Report.vue"),
         props: true,
         meta: { requiredAuth: true },
       },
       {
         path: "/moderation/logs",
         name: SettingsRouteName.REPORT_LOGS,
-        component: Logs,
+        component: () =>
+          import(/* webpackChunkName: "ModerationLogs" */ "@/views/Moderation/Logs.vue"),
         props: true,
         meta: { requiredAuth: true },
       },
@@ -195,13 +189,19 @@ export const settingsRoutes: RouteConfig[] = [
       {
         path: "/identity/create",
         name: SettingsRouteName.CREATE_IDENTITY,
-        component: EditIdentity,
+        component: () =>
+          import(
+            /* webpackChunkName: "EditIdentity" */ "@/views/Account/children/EditIdentity.vue"
+          ),
         props: (route) => ({ identityName: route.params.identityName, isUpdate: false }),
       },
       {
         path: "/identity/update/:identityName?",
         name: SettingsRouteName.UPDATE_IDENTITY,
-        component: EditIdentity,
+        component: () =>
+          import(
+            /* webpackChunkName: "EditIdentity" */ "@/views/Account/children/EditIdentity.vue"
+          ),
         props: (route) => ({ identityName: route.params.identityName, isUpdate: true }),
       },
     ],
diff --git a/js/src/router/user.ts b/js/src/router/user.ts
index e5f5e98e0..96989b5af 100644
--- a/js/src/router/user.ts
+++ b/js/src/router/user.ts
@@ -16,7 +16,7 @@ export const userRoutes: RouteConfig[] = [
   {
     path: "/register/user",
     name: UserRouteName.REGISTER,
-    component: () => import("@/views/User/Register.vue"),
+    component: () => import(/* webpackChunkName: "RegisterUser" */ "@/views/User/Register.vue"),
     props: true,
     meta: { requiredAuth: false },
     beforeEnter: beforeRegisterGuard,
@@ -24,7 +24,8 @@ export const userRoutes: RouteConfig[] = [
   {
     path: "/register/profile",
     name: UserRouteName.REGISTER_PROFILE,
-    component: () => import("@/views/Account/Register.vue"),
+    component: () =>
+      import(/* webpackChunkName: "RegisterProfile" */ "@/views/Account/Register.vue"),
     // We can only pass string values through params, therefore
     props: (route) => ({
       email: route.params.email,
@@ -35,42 +36,46 @@ export const userRoutes: RouteConfig[] = [
   {
     path: "/resend-instructions",
     name: UserRouteName.RESEND_CONFIRMATION,
-    component: () => import("@/views/User/ResendConfirmation.vue"),
+    component: () =>
+      import(/* webpackChunkName: "ResendConfirmation" */ "@/views/User/ResendConfirmation.vue"),
     props: true,
     meta: { requiresAuth: false },
   },
   {
     path: "/password-reset/send",
     name: UserRouteName.SEND_PASSWORD_RESET,
-    component: () => import("@/views/User/SendPasswordReset.vue"),
+    component: () =>
+      import(/* webpackChunkName: "SendPasswordReset" */ "@/views/User/SendPasswordReset.vue"),
     props: true,
     meta: { requiresAuth: false },
   },
   {
     path: "/password-reset/:token",
     name: UserRouteName.PASSWORD_RESET,
-    component: () => import("@/views/User/PasswordReset.vue"),
+    component: () =>
+      import(/* webpackChunkName: "PasswordReset" */ "@/views/User/PasswordReset.vue"),
     meta: { requiresAuth: false },
     props: true,
   },
   {
     path: "/validate/email/:token",
     name: UserRouteName.EMAIL_VALIDATE,
-    component: () => import("@/views/User/EmailValidate.vue"),
+    component: () =>
+      import(/* webpackChunkName: "EmailValidate" */ "@/views/User/EmailValidate.vue"),
     props: true,
     meta: { requiresAuth: false },
   },
   {
     path: "/validate/:token",
     name: UserRouteName.VALIDATE,
-    component: () => import("@/views/User/Validate.vue"),
+    component: () => import(/* webpackChunkName: "Validate" */ "@/views/User/Validate.vue"),
     props: true,
     meta: { requiresAuth: false },
   },
   {
     path: "/login",
     name: UserRouteName.LOGIN,
-    component: () => import("@/views/User/Login.vue"),
+    component: () => import(/* webpackChunkName: "Login" */ "@/views/User/Login.vue"),
     props: true,
     meta: { requiredAuth: false },
   },