From 13525a350f4d196cf53e8fb3adb96f69f326c286 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Simen=20Heggest=C3=B8yl?=
 <simen.heggestoyl@origo.oslo.kommune.no>
Date: Wed, 20 Sep 2023 12:50:46 +0200
Subject: [PATCH] Remove (almost) all use of dynamic imports

Dynamic imports reduce the bundle size of the main `index.js` file,
but they cause problems when deploying new versions of the app because
previous versions of the bundle files (which are still possibly
referenced by a running app) are removed.

We keep one exception for this change: the `Api.js` bundle is still
loaded dynamically because of its size (almost the same as `index.js`
itself).
---
 CHANGELOG.md                                  |  2 +
 src/components/EmptyState.vue                 |  4 +-
 src/components/FormComponent.vue              |  4 +-
 src/components/GanttChart.vue                 |  3 +-
 src/components/KeyResultRow.vue               |  3 +-
 src/components/KeyResultsList.vue             |  6 ++-
 src/components/KpiDetails.vue                 | 13 +++--
 src/components/ObjectiveRow.vue               |  3 +-
 src/components/ObjectiveWorkbench.vue         |  9 ++--
 src/components/drawers/EditItemDrawer.vue     |  3 +-
 src/components/drawers/EditKeyResult.vue      |  3 +-
 src/components/drawers/EditObjective.vue      |  6 ++-
 src/components/drawers/KpiDrawer.vue          | 11 ++--
 src/components/drawers/PagedDrawerWrapper.vue |  3 +-
 src/components/generic/form/FormSection.vue   |  4 +-
 src/components/modals/KPIProgressModal.vue    |  7 +--
 .../widgets/WidgetKeyResultDetails.vue        |  6 ++-
 .../widgets/WidgetKeyResultNotes.vue          |  5 +-
 .../widgets/WidgetObjectiveDetails.vue        |  6 ++-
 .../ProgressHistoryTable.vue                  |  8 +--
 .../WidgetKpiProgressHistory.vue              |  7 +--
 .../WidgetProgressHistory.vue                 |  3 +-
 src/components/widgets/WidgetWeights.vue      |  3 +-
 src/router/index.js                           | 50 +++++++++++++------
 src/views/Admin/Admin.vue                     |  9 ++--
 src/views/Admin/components/AdminUsers.vue     |  6 ++-
 src/views/Item/ItemAbout.vue                  | 11 ++--
 src/views/Item/ItemMeasurements.vue           | 15 +++---
 src/views/Item/ItemOKRs.vue                   | 17 ++++---
 src/views/Item/ItemWrapper.vue                |  3 +-
 src/views/KeyResultHome.vue                   | 33 ++++++------
 src/views/NotFound.vue                        |  3 +-
 src/views/ObjectiveHome.vue                   | 23 +++++----
 33 files changed, 185 insertions(+), 107 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 1c8b648d3..08d2201e2 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -10,6 +10,8 @@ All notable changes to this project will be documented in this file. The format
 - Organization, department and product filter in admin panel should no longer
   disappear when search result count reaches certain threshold.
 - Improved WCAG compliance with respect to text color contrast.
+- Fixed a problem that would sometimes cause an "infinite spinner" when a new
+  version of the app was deployed.
 
 ### Changed
 
diff --git a/src/components/EmptyState.vue b/src/components/EmptyState.vue
index 1823900d4..2724529a7 100644
--- a/src/components/EmptyState.vue
+++ b/src/components/EmptyState.vue
@@ -16,11 +16,13 @@
 </template>
 
 <script>
+import BuildingsGraphic from '@/components/graphics/BuildingsGraphic.vue';
+
 export default {
   name: 'EmptyState',
 
   components: {
-    BuildingsGraphic: () => import('@/components/graphics/BuildingsGraphic.vue'),
+    BuildingsGraphic,
   },
 
   props: {
diff --git a/src/components/FormComponent.vue b/src/components/FormComponent.vue
index b94d74f93..095728238 100644
--- a/src/components/FormComponent.vue
+++ b/src/components/FormComponent.vue
@@ -105,13 +105,13 @@
 </template>
 
 <script>
-import { PktButton } from '@oslokommune/punkt-vue2';
+import { PktAlert, PktButton } from '@oslokommune/punkt-vue2';
 
 export default {
   name: 'FormComponent',
 
   components: {
-    PktAlert: () => import('@oslokommune/punkt-vue2').then(({ PktAlert }) => PktAlert),
+    PktAlert,
     PktButton,
   },
 
diff --git a/src/components/GanttChart.vue b/src/components/GanttChart.vue
index 22c2d522a..eece56eb4 100644
--- a/src/components/GanttChart.vue
+++ b/src/components/GanttChart.vue
@@ -93,12 +93,13 @@ import {
   startOfMonth,
 } from 'date-fns';
 import { dateLongCompact } from '@/util';
+import ObjectiveRow from '@/components/ObjectiveRow.vue';
 
 export default {
   name: 'GanttChart',
 
   components: {
-    ObjectiveRow: () => import('@/components/ObjectiveRow.vue'),
+    ObjectiveRow,
   },
 
   props: {
diff --git a/src/components/KeyResultRow.vue b/src/components/KeyResultRow.vue
index 9c9307d00..fa5d2dbbb 100644
--- a/src/components/KeyResultRow.vue
+++ b/src/components/KeyResultRow.vue
@@ -22,12 +22,13 @@
 <script>
 import { format } from 'd3-format';
 import { numberLocale } from '@/util';
+import ProgressBar from '@/components/ProgressBar.vue';
 
 export default {
   name: 'KeyResultRow',
 
   components: {
-    ProgressBar: () => import('@/components/ProgressBar.vue'),
+    ProgressBar,
   },
 
   props: {
diff --git a/src/components/KeyResultsList.vue b/src/components/KeyResultsList.vue
index 8bbd31097..71a99d67b 100644
--- a/src/components/KeyResultsList.vue
+++ b/src/components/KeyResultsList.vue
@@ -13,13 +13,15 @@
 
 <script>
 import { db } from '@/config/firebaseConfig';
+import EmptyState from '@/components/EmptyState.vue';
+import KeyResultRow from '@/components/KeyResultRow.vue';
 
 export default {
   name: 'KeyResultsList',
 
   components: {
-    EmptyState: () => import('@/components/EmptyState.vue'),
-    KeyResultRow: () => import('@/components/KeyResultRow.vue'),
+    EmptyState,
+    KeyResultRow,
   },
 
   props: {
diff --git a/src/components/KpiDetails.vue b/src/components/KpiDetails.vue
index 94375c2ba..bc8ceca9c 100644
--- a/src/components/KpiDetails.vue
+++ b/src/components/KpiDetails.vue
@@ -68,15 +68,18 @@
 import { mapState, mapGetters } from 'vuex';
 import { db } from '@/config/firebaseConfig';
 import { PktAlert, PktButton } from '@oslokommune/punkt-vue2';
-import Progress from '@/db/Kpi/Progress';
 import {
   filterDuplicatedProgressValues,
   getCachedKPIProgress,
   getKPIProgressQuery,
 } from '@/util/kpiHelpers';
+import EditGoalsModal from '@/components/modals/EditGoalsModal.vue';
+import HTMLOutput from '@/components/HTMLOutput.vue';
+import Progress from '@/db/Kpi/Progress';
+import ProgressModal from '@/components/modals/KPIProgressModal.vue';
 import WidgetKpiProgressGraph from '@/components/widgets/WidgetKpiProgressGraph.vue';
-import WidgetKpiProgressStats from '@/components/widgets/WidgetKpiProgressStats.vue';
 import WidgetKpiProgressHistory from '@/components/widgets/WidgetProgressHistory/WidgetKpiProgressHistory.vue';
+import WidgetKpiProgressStats from '@/components/widgets/WidgetKpiProgressStats.vue';
 
 export default {
   name: 'KpiDetails',
@@ -84,9 +87,9 @@ export default {
   components: {
     PktAlert,
     PktButton,
-    HTMLOutput: () => import('@/components/HTMLOutput.vue'),
-    ProgressModal: () => import('@/components/modals/KPIProgressModal.vue'),
-    EditGoalsModal: () => import('@/components/modals/EditGoalsModal.vue'),
+    ProgressModal,
+    HTMLOutput,
+    EditGoalsModal,
     WidgetKpiProgressGraph,
     WidgetKpiProgressHistory,
     WidgetKpiProgressStats,
diff --git a/src/components/ObjectiveRow.vue b/src/components/ObjectiveRow.vue
index 91196e53d..4289040f0 100644
--- a/src/components/ObjectiveRow.vue
+++ b/src/components/ObjectiveRow.vue
@@ -24,12 +24,13 @@
 <script>
 import { mapState } from 'vuex';
 import { format } from 'd3-format';
+import ProgressBar from '@/components/ProgressBar.vue';
 
 export default {
   name: 'ObjectiveRow',
 
   components: {
-    ProgressBar: () => import('@/components/ProgressBar.vue'),
+    ProgressBar,
   },
 
   props: {
diff --git a/src/components/ObjectiveWorkbench.vue b/src/components/ObjectiveWorkbench.vue
index 721050e61..276bb7e17 100644
--- a/src/components/ObjectiveWorkbench.vue
+++ b/src/components/ObjectiveWorkbench.vue
@@ -74,14 +74,17 @@
 import { format } from 'd3-format';
 import { mapActions, mapGetters } from 'vuex';
 import { PktButton } from '@oslokommune/punkt-vue2';
+import KeyResultsList from '@/components/KeyResultsList.vue';
+import ObjectiveRow from '@/components/ObjectiveRow.vue';
+import ProgressBar from '@/components/ProgressBar.vue';
 
 export default {
   name: 'ObjectiveWorkbench',
 
   components: {
-    KeyResultsList: () => import('@/components/KeyResultsList.vue'),
-    ObjectiveRow: () => import('@/components/ObjectiveRow.vue'),
-    ProgressBar: () => import('@/components/ProgressBar.vue'),
+    KeyResultsList,
+    ObjectiveRow,
+    ProgressBar,
     PktButton,
   },
 
diff --git a/src/components/drawers/EditItemDrawer.vue b/src/components/drawers/EditItemDrawer.vue
index 9e8c45b1d..093985d2f 100644
--- a/src/components/drawers/EditItemDrawer.vue
+++ b/src/components/drawers/EditItemDrawer.vue
@@ -157,13 +157,14 @@ import Product from '@/db/Product';
 import { db } from '@/config/firebaseConfig';
 import { PktAlert, PktButton } from '@oslokommune/punkt-vue2';
 import { FormSection, BtnSave, BtnDelete } from '@/components/generic/form';
+import ArchivedRestore from '@/components/ArchivedRestore.vue';
 import PagedDrawerWrapper from '@/components/drawers/PagedDrawerWrapper.vue';
 
 export default {
   name: 'EditItemDrawer',
 
   components: {
-    ArchivedRestore: () => import('@/components/ArchivedRestore.vue'),
+    ArchivedRestore,
     PktAlert,
     PktButton,
     PagedDrawerWrapper,
diff --git a/src/components/drawers/EditKeyResult.vue b/src/components/drawers/EditKeyResult.vue
index 2b1656110..f6f7efd6d 100644
--- a/src/components/drawers/EditKeyResult.vue
+++ b/src/components/drawers/EditKeyResult.vue
@@ -151,13 +151,14 @@ import KeyResult from '@/db/KeyResult';
 import { isDepartment, isOrganization } from '@/util/getActiveItemType';
 import { PktButton } from '@oslokommune/punkt-vue2';
 import { FormSection, BtnSave, BtnDelete } from '@/components/generic/form';
+import ArchivedRestore from '@/components/ArchivedRestore.vue';
 import PagedDrawerWrapper from '@/components/drawers/PagedDrawerWrapper.vue';
 
 export default {
   name: 'EditKeyResult',
 
   components: {
-    ArchivedRestore: () => import('@/components/ArchivedRestore.vue'),
+    ArchivedRestore,
     PktButton,
     PagedDrawerWrapper,
     FormSection,
diff --git a/src/components/drawers/EditObjective.vue b/src/components/drawers/EditObjective.vue
index 0919b6e51..3002c447c 100644
--- a/src/components/drawers/EditObjective.vue
+++ b/src/components/drawers/EditObjective.vue
@@ -115,14 +115,16 @@ import firebase from 'firebase/compat/app';
 import locale from 'flatpickr/dist/l10n/no';
 import { PktButton } from '@oslokommune/punkt-vue2';
 import { FormSection, BtnSave, BtnDelete, BtnCancel } from '@/components/generic/form';
+import ArchivedRestore from '@/components/ArchivedRestore.vue';
 import PagedDrawerWrapper from '@/components/drawers/PagedDrawerWrapper.vue';
+import PeriodShortcut from '@/components/period/PeriodShortcut.vue';
 
 export default {
   name: 'EditObjective',
 
   components: {
-    ArchivedRestore: () => import('@/components/ArchivedRestore.vue'),
-    PeriodShortcut: () => import('@/components/period/PeriodShortcut.vue'),
+    ArchivedRestore,
+    PeriodShortcut,
     PktButton,
     PagedDrawerWrapper,
     FormSection,
diff --git a/src/components/drawers/KpiDrawer.vue b/src/components/drawers/KpiDrawer.vue
index 366c3b3e4..fd83a9fad 100644
--- a/src/components/drawers/KpiDrawer.vue
+++ b/src/components/drawers/KpiDrawer.vue
@@ -215,8 +215,8 @@
 
 <script>
 import { mapState } from 'vuex';
+import { PktAlert, PktButton } from '@oslokommune/punkt-vue2';
 import { functions } from '@/config/firebaseConfig';
-import Kpi from '@/db/Kpi';
 import {
   kpiFormats,
   kpiStartValues,
@@ -224,17 +224,18 @@ import {
   kpiTrendOptions,
   kpiUpdateFrequencies,
 } from '@/util/kpiHelpers';
-import { PktButton } from '@oslokommune/punkt-vue2';
 import { FormSection, ToggleButton, BtnSave, BtnDelete } from '@/components/generic/form';
-import PagedDrawerWrapper from '@/components/drawers/PagedDrawerWrapper.vue';
+import ArchivedRestore from '@/components/ArchivedRestore.vue';
 import GoogleSheetsFormGroup from '@/components/forms/partials/GoogleSheetsFormGroup.vue';
+import Kpi from '@/db/Kpi';
+import PagedDrawerWrapper from '@/components/drawers/PagedDrawerWrapper.vue';
 
 export default {
   name: 'EditItemDrawer',
 
   components: {
-    ArchivedRestore: () => import('@/components/ArchivedRestore.vue'),
-    PktAlert: () => import('@oslokommune/punkt-vue2').then(({ PktAlert }) => PktAlert),
+    ArchivedRestore,
+    PktAlert,
     PktButton,
     PagedDrawerWrapper,
     FormSection,
diff --git a/src/components/drawers/PagedDrawerWrapper.vue b/src/components/drawers/PagedDrawerWrapper.vue
index 3659d41ee..b4ea442a8 100644
--- a/src/components/drawers/PagedDrawerWrapper.vue
+++ b/src/components/drawers/PagedDrawerWrapper.vue
@@ -36,6 +36,7 @@
 </template>
 
 <script>
+import ClappingHands from '@/components/ClappingHands.vue';
 import SliderContainer from '@/components/drawers/SliderContainer.vue';
 
 export default {
@@ -43,7 +44,7 @@ export default {
 
   components: {
     SliderContainer,
-    ClappingHands: () => import('@/components/ClappingHands.vue'),
+    ClappingHands,
   },
 
   props: {
diff --git a/src/components/generic/form/FormSection.vue b/src/components/generic/form/FormSection.vue
index 7f136578b..3600566df 100644
--- a/src/components/generic/form/FormSection.vue
+++ b/src/components/generic/form/FormSection.vue
@@ -35,11 +35,13 @@
 </template>
 
 <script>
+import { PktAlert } from '@oslokommune/punkt-vue2';
+
 export default {
   name: 'FormSection',
 
   components: {
-    PktAlert: () => import('@oslokommune/punkt-vue2').then(({ PktAlert }) => PktAlert),
+    PktAlert,
   },
 
   props: {
diff --git a/src/components/modals/KPIProgressModal.vue b/src/components/modals/KPIProgressModal.vue
index ed738a6e0..37fe11b2d 100644
--- a/src/components/modals/KPIProgressModal.vue
+++ b/src/components/modals/KPIProgressModal.vue
@@ -84,17 +84,18 @@
 
 <script>
 import { endOfDay } from 'date-fns';
-import Progress from '@/db/Kpi/Progress';
+import { PktAlert } from '@oslokommune/punkt-vue2';
 import { dateShort } from '@/util';
 import { formatKPIValue } from '@/util/kpiHelpers';
+import Progress from '@/db/Kpi/Progress';
+import ProgressModal from '@/components/modals/ProgressModal.vue';
 import ProgressUpdateAPIExample from '@/components/ProgressUpdateAPIExample.vue';
-import ProgressModal from './ProgressModal.vue';
 
 export default {
   name: 'KPIProgressModal',
 
   components: {
-    PktAlert: () => import('@oslokommune/punkt-vue2').then(({ PktAlert }) => PktAlert),
+    PktAlert,
     ProgressUpdateAPIExample,
   },
 
diff --git a/src/components/widgets/WidgetKeyResultDetails.vue b/src/components/widgets/WidgetKeyResultDetails.vue
index 31bf42c3b..1b12d104b 100644
--- a/src/components/widgets/WidgetKeyResultDetails.vue
+++ b/src/components/widgets/WidgetKeyResultDetails.vue
@@ -111,13 +111,15 @@ import { mapState } from 'vuex';
 import { db } from '@/config/firebaseConfig';
 import { dateLong } from '@/util';
 import formattedPeriod from '@/util/okr';
+import ProfileModal from '@/components/modals/ProfileModal.vue';
+import Widget from './WidgetWrapper.vue';
 
 export default {
   name: 'WidgetKeyResultDetails',
 
   components: {
-    Widget: () => import('./WidgetWrapper.vue'),
-    ProfileModal: () => import('@/components/modals/ProfileModal.vue'),
+    Widget,
+    ProfileModal,
   },
 
   data: () => ({
diff --git a/src/components/widgets/WidgetKeyResultNotes.vue b/src/components/widgets/WidgetKeyResultNotes.vue
index dfbaec4df..e6e875c56 100644
--- a/src/components/widgets/WidgetKeyResultNotes.vue
+++ b/src/components/widgets/WidgetKeyResultNotes.vue
@@ -37,8 +37,9 @@ import { mapState } from 'vuex';
 import { marked } from 'marked';
 import { PktButton } from '@oslokommune/punkt-vue2';
 import dompurify from 'dompurify';
-import KeyResult from '@/db/KeyResult';
 import { BtnSave } from '@/components/generic/form';
+import KeyResult from '@/db/KeyResult';
+import Widget from './WidgetWrapper.vue';
 
 marked.setOptions({
   smartypants: true,
@@ -50,7 +51,7 @@ export default {
   components: {
     BtnSave,
     PktButton,
-    Widget: () => import('./WidgetWrapper.vue'),
+    Widget,
   },
 
   data: () => ({
diff --git a/src/components/widgets/WidgetObjectiveDetails.vue b/src/components/widgets/WidgetObjectiveDetails.vue
index dafa80599..a85c94a1f 100644
--- a/src/components/widgets/WidgetObjectiveDetails.vue
+++ b/src/components/widgets/WidgetObjectiveDetails.vue
@@ -71,13 +71,15 @@
 import { mapState } from 'vuex';
 import { dateLong } from '@/util';
 import formattedPeriod from '@/util/okr';
+import ProfileModal from '@/components/modals/ProfileModal.vue';
+import Widget from './WidgetWrapper.vue';
 
 export default {
   name: 'WidgetObjectiveDetails',
 
   components: {
-    Widget: () => import('./WidgetWrapper.vue'),
-    ProfileModal: () => import('@/components/modals/ProfileModal.vue'),
+    Widget,
+    ProfileModal,
   },
 
   data: () => ({
diff --git a/src/components/widgets/WidgetProgressHistory/ProgressHistoryTable.vue b/src/components/widgets/WidgetProgressHistory/ProgressHistoryTable.vue
index fbd00d461..17f3bf2ba 100644
--- a/src/components/widgets/WidgetProgressHistory/ProgressHistoryTable.vue
+++ b/src/components/widgets/WidgetProgressHistory/ProgressHistoryTable.vue
@@ -116,17 +116,19 @@
 <script>
 import { mapGetters } from 'vuex';
 import { PktButton } from '@oslokommune/punkt-vue2';
-import LoadingSmall from '@/components/LoadingSmall.vue';
 import { BtnDelete } from '@/components/generic/form/buttons';
+import EmptyState from '@/components/EmptyState.vue';
+import LoadingSmall from '@/components/LoadingSmall.vue';
+import ProfileModal from '@/components/modals/ProfileModal.vue';
 import UserLink from './UserLink.vue';
 
 export default {
   name: 'ProgressHistoryTable',
 
   components: {
-    EmptyState: () => import('@/components/EmptyState.vue'),
+    EmptyState,
     PktButton,
-    ProfileModal: () => import('@/components/modals/ProfileModal.vue'),
+    ProfileModal,
     LoadingSmall,
     UserLink,
     BtnDelete,
diff --git a/src/components/widgets/WidgetProgressHistory/WidgetKpiProgressHistory.vue b/src/components/widgets/WidgetProgressHistory/WidgetKpiProgressHistory.vue
index e549275c8..3a1988929 100644
--- a/src/components/widgets/WidgetProgressHistory/WidgetKpiProgressHistory.vue
+++ b/src/components/widgets/WidgetProgressHistory/WidgetKpiProgressHistory.vue
@@ -44,8 +44,9 @@
 </template>
 
 <script>
-import { mapState } from 'vuex';
 import { csvFormatBody, csvFormatRow } from 'd3-dsv';
+import { mapState } from 'vuex';
+import { PktButton } from '@oslokommune/punkt-vue2';
 import i18n from '@/locale/i18n';
 import { dateShort } from '@/util';
 import {
@@ -54,7 +55,7 @@ import {
   getKPIProgressQuery,
 } from '@/util/kpiHelpers';
 import downloadFile from '@/util/downloadFile';
-import { PktButton } from '@oslokommune/punkt-vue2';
+import EditValueModal from '@/components/modals/KPIProgressModal.vue';
 import ProgressHistoryTable from './ProgressHistoryTable.vue';
 import WidgetWrapper from '../WidgetWrapper.vue';
 
@@ -64,7 +65,7 @@ export default {
   components: {
     Widget: WidgetWrapper,
     ProgressHistoryTable,
-    EditValueModal: () => import('@/components/modals/KPIProgressModal.vue'),
+    EditValueModal,
     PktButton,
   },
 
diff --git a/src/components/widgets/WidgetProgressHistory/WidgetProgressHistory.vue b/src/components/widgets/WidgetProgressHistory/WidgetProgressHistory.vue
index c7b518886..b6230e449 100644
--- a/src/components/widgets/WidgetProgressHistory/WidgetProgressHistory.vue
+++ b/src/components/widgets/WidgetProgressHistory/WidgetProgressHistory.vue
@@ -28,6 +28,7 @@
 import { mapGetters } from 'vuex';
 import { dateTimeShort } from '@/util';
 import { formatValue } from '@/util/keyResultProgress';
+import EditValueModal from '@/components/modals/ProgressModal.vue';
 import ProgressHistoryTable from './ProgressHistoryTable.vue';
 import WidgetWrapper from '../WidgetWrapper.vue';
 
@@ -37,7 +38,7 @@ export default {
   components: {
     Widget: WidgetWrapper,
     ProgressHistoryTable,
-    EditValueModal: () => import('@/components/modals/ProgressModal.vue'),
+    EditValueModal,
   },
 
   props: {
diff --git a/src/components/widgets/WidgetWeights.vue b/src/components/widgets/WidgetWeights.vue
index 06f241d13..f27eefdfb 100644
--- a/src/components/widgets/WidgetWeights.vue
+++ b/src/components/widgets/WidgetWeights.vue
@@ -19,12 +19,13 @@
 import { scaleLinear } from 'd3-scale';
 import { max } from 'd3-array';
 import { db } from '@/config/firebaseConfig';
+import Widget from './WidgetWrapper.vue';
 
 export default {
   name: 'WidgetWeights',
 
   components: {
-    Widget: () => import('./WidgetWrapper.vue'),
+    Widget,
   },
 
   props: {
diff --git a/src/router/index.js b/src/router/index.js
index 1aaa3e163..44af5eddb 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,6 +1,24 @@
 import Vue from 'vue';
 import Router from 'vue-router';
+
+import Admin from '@/views/Admin/Admin.vue';
+import AdminWrapper from '@/views/Admin/AdminWrapper.vue';
+import CreateDepartment from '@/views/Admin/CreateDepartment.vue';
+import CreateOrganization from '@/views/Admin/CreateOrganization.vue';
+import CreateProduct from '@/views/Admin/CreateProduct.vue';
+import Forbidden from '@/views/Forbidden.vue';
+import Help from '@/views/Help.vue';
 import Home from '@/views/Home.vue';
+import ItemAbout from '@/views/Item/ItemAbout.vue';
+import ItemMeasurements from '@/views/Item/ItemMeasurements.vue';
+import ItemOKRs from '@/views/Item/ItemOKRs.vue';
+import ItemWrapper from '@/views/Item/ItemWrapper.vue';
+import KeyResultHome from '@/views/KeyResultHome.vue';
+import Login from '@/views/Login.vue';
+import NotFound from '@/views/NotFound.vue';
+import ObjectiveHome from '@/views/ObjectiveHome.vue';
+import RequestAccess from '@/views/RequestAccess.vue';
+
 import * as routerGuards from './router-guards';
 
 Vue.use(Router);
@@ -20,55 +38,55 @@ const routes = [
   {
     path: '/login',
     name: 'Login',
-    component: () => import('@/views/Login.vue'),
+    component: Login,
     beforeEnter: routerGuards.login,
   },
   {
     path: '/request-access',
     name: 'request-access',
-    component: () => import('@/views/RequestAccess.vue'),
+    component: RequestAccess,
     beforeEnter: routerGuards.requestAccess,
   },
   {
     path: '/403',
     name: 'Forbidden',
-    component: () => import('@/views/Forbidden.vue'),
+    component: Forbidden,
   },
   {
     path: '/admin',
     beforeEnter: routerGuards.admin,
-    component: () => import('@/views/Admin/AdminWrapper.vue'),
+    component: AdminWrapper,
     children: [
       {
         path: '',
         name: 'Admin',
-        component: () => import('@/views/Admin/Admin.vue'),
+        component: Admin,
       },
       {
         path: 'create-organization',
         name: 'CreateOrganization',
-        component: () => import('@/views/Admin/CreateOrganization.vue'),
+        component: CreateOrganization,
       },
       {
         path: 'create-department',
         name: 'CreateDepartment',
-        component: () => import('@/views/Admin/CreateDepartment.vue'),
+        component: CreateDepartment,
       },
       {
         path: 'create-product',
         name: 'CreateProduct',
-        component: () => import('@/views/Admin/CreateProduct.vue'),
+        component: CreateProduct,
       },
     ],
   },
   {
     path: '/help',
     name: 'Help',
-    component: () => import('@/views/Help.vue'),
+    component: Help,
   },
   {
     path: '/:slug',
-    component: () => import('@/views/Item/ItemWrapper.vue'),
+    component: ItemWrapper,
     beforeEnter: routerGuards.itemCommon,
     children: [
       {
@@ -78,31 +96,31 @@ const routes = [
       {
         path: 'okr',
         name: 'ItemHome',
-        component: () => import('@/views/Item/ItemOKRs.vue'),
+        component: ItemOKRs,
         beforeEnter: routerGuards.itemOKRs,
         beforeRouteUpdate: routerGuards.itemOKRs,
       },
       {
         path: 'measurements/:kpiId?',
         name: 'ItemMeasurements',
-        component: () => import('@/views/Item/ItemMeasurements.vue'),
+        component: ItemMeasurements,
         beforeEnter: routerGuards.itemMeasurements,
       },
       {
         path: 'about',
         name: 'ItemAbout',
-        component: () => import('@/views/Item/ItemAbout.vue'),
+        component: ItemAbout,
       },
       {
         path: 'k/:keyResultId',
         name: 'KeyResultHome',
-        component: () => import('@/views/KeyResultHome.vue'),
+        component: KeyResultHome,
         beforeEnter: routerGuards.keyResultHome,
       },
       {
         path: 'o/:objectiveId',
         name: 'ObjectiveHome',
-        component: () => import('@/views/ObjectiveHome.vue'),
+        component: ObjectiveHome,
         beforeEnter: routerGuards.objectiveHome,
       },
       /*
@@ -124,7 +142,7 @@ const routes = [
   {
     path: '*',
     name: 'NotFound',
-    component: () => import('@/views/NotFound.vue'),
+    component: NotFound,
   },
 ];
 
diff --git a/src/views/Admin/Admin.vue b/src/views/Admin/Admin.vue
index 19da4cdd0..5aee3a331 100644
--- a/src/views/Admin/Admin.vue
+++ b/src/views/Admin/Admin.vue
@@ -12,14 +12,17 @@
 
 <script>
 import { mapState } from 'vuex';
+import AdminAccessRequests from './components/AdminAccessRequests.vue';
+import AdminItems from './components/AdminItems.vue';
+import AdminUsers from './components/AdminUsers.vue';
 
 export default {
   name: 'Admin',
 
   components: {
-    AdminAccessRequests: () => import('./components/AdminAccessRequests.vue'),
-    AdminUsers: () => import('./components/AdminUsers.vue'),
-    AdminItems: () => import('./components/AdminItems.vue'),
+    AdminAccessRequests,
+    AdminUsers,
+    AdminItems,
   },
 
   computed: {
diff --git a/src/views/Admin/components/AdminUsers.vue b/src/views/Admin/components/AdminUsers.vue
index 40cb1cc15..3a3ebd11b 100644
--- a/src/views/Admin/components/AdminUsers.vue
+++ b/src/views/Admin/components/AdminUsers.vue
@@ -62,6 +62,8 @@
 import { mapState } from 'vuex';
 import Fuse from 'fuse.js';
 import { PktButton } from '@oslokommune/punkt-vue2';
+import AddUsers from './AddUsers.vue';
+import EditUser from './EditUser.vue';
 
 const fuseSettings = {
   threshold: 0.5,
@@ -85,8 +87,8 @@ export default {
   name: 'AdminUsers',
 
   components: {
-    EditUser: () => import('./EditUser.vue'),
-    AddUsers: () => import('./AddUsers.vue'),
+    EditUser,
+    AddUsers,
     PktButton,
   },
 
diff --git a/src/views/Item/ItemAbout.vue b/src/views/Item/ItemAbout.vue
index a898a4caf..78e59a33e 100644
--- a/src/views/Item/ItemAbout.vue
+++ b/src/views/Item/ItemAbout.vue
@@ -62,6 +62,8 @@
 
 <script>
 import { mapGetters, mapState } from 'vuex';
+import { PktButton } from '@oslokommune/punkt-vue2';
+import { isDepartment, isOrganization } from '@/util/getActiveItemType';
 import {
   possibleDevelopers,
   possibleAdm,
@@ -69,9 +71,9 @@ import {
   displayOrder,
 } from '@/config/jobPositions';
 import HTMLOutput from '@/components/HTMLOutput.vue';
-import { PktButton } from '@oslokommune/punkt-vue2';
-import { isDepartment, isOrganization } from '@/util/getActiveItemType';
 import i18n from '@/locale/i18n';
+import ItemDrawer from '@/components/drawers/EditItemDrawer.vue';
+import ProfileModal from '@/components/modals/ProfileModal.vue';
 
 export default {
   name: 'ItemAbout',
@@ -79,9 +81,8 @@ export default {
   components: {
     HTMLOutput,
     PktButton,
-    // RoleMembers: () => import('@/components/RoleMembers.vue'),
-    ItemDrawer: () => import('@/components/drawers/EditItemDrawer.vue'),
-    ProfileModal: () => import('@/components/modals/ProfileModal.vue'),
+    ItemDrawer,
+    ProfileModal,
   },
 
   data: () => ({
diff --git a/src/views/Item/ItemMeasurements.vue b/src/views/Item/ItemMeasurements.vue
index ad1fc4a27..944cc34c0 100644
--- a/src/views/Item/ItemMeasurements.vue
+++ b/src/views/Item/ItemMeasurements.vue
@@ -69,9 +69,12 @@
 
 <script>
 import { mapState, mapGetters } from 'vuex';
-
-import KpiWidgetGroup from '@/components/KpiWidgetGroup.vue';
+import { PktButton } from '@oslokommune/punkt-vue2';
+import EmptyPage from '@/components/pages/EmptyPage.vue';
 import KpiDetails from '@/components/KpiDetails.vue';
+import KpiDrawer from '@/components/drawers/KpiDrawer.vue';
+import KpiWidgetGroup from '@/components/KpiWidgetGroup.vue';
+import NotFoundPage from '@/components/pages/NotFoundPage.vue';
 
 export default {
   name: 'ItemMeasurements',
@@ -79,10 +82,10 @@ export default {
   components: {
     KpiWidgetGroup,
     KpiDetails,
-    EmptyPage: () => import('@/components/pages/EmptyPage.vue'),
-    PktButton: () => import('@oslokommune/punkt-vue2').then(({ PktButton }) => PktButton),
-    NotFoundPage: () => import('@/components/pages/NotFoundPage.vue'),
-    KpiDrawer: () => import('@/components/drawers/KpiDrawer.vue'),
+    EmptyPage,
+    NotFoundPage,
+    PktButton,
+    KpiDrawer,
   },
 
   data: () => ({
diff --git a/src/views/Item/ItemOKRs.vue b/src/views/Item/ItemOKRs.vue
index dc31d09e3..7e3aead8b 100644
--- a/src/views/Item/ItemOKRs.vue
+++ b/src/views/Item/ItemOKRs.vue
@@ -73,18 +73,23 @@
 
 <script>
 import { mapGetters, mapState, mapActions } from 'vuex';
-import routerGuard from '@/router/router-guards/itemOKRs';
 import { PktButton } from '@oslokommune/punkt-vue2';
+import EmptyPage from '@/components/pages/EmptyPage.vue';
+import EmptyState from '@/components/EmptyState.vue';
+import GanttChart from '@/components/GanttChart.vue';
+import ObjectiveDrawer from '@/components/drawers/EditObjective.vue';
+import ObjectiveWorkbench from '@/components/ObjectiveWorkbench.vue';
+import routerGuard from '@/router/router-guards/itemOKRs';
 
 export default {
   name: 'ItemHome',
 
   components: {
-    GanttChart: () => import('@/components/GanttChart.vue'),
-    EmptyState: () => import('@/components/EmptyState.vue'),
-    EmptyPage: () => import('@/components/pages/EmptyPage.vue'),
-    ObjectiveWorkbench: () => import('@/components/ObjectiveWorkbench.vue'),
-    ObjectiveDrawer: () => import('@/components/drawers/EditObjective.vue'),
+    GanttChart,
+    EmptyState,
+    EmptyPage,
+    ObjectiveWorkbench,
+    ObjectiveDrawer,
     PktButton,
   },
 
diff --git a/src/views/Item/ItemWrapper.vue b/src/views/Item/ItemWrapper.vue
index 6ace3d5a8..f02012f86 100644
--- a/src/views/Item/ItemWrapper.vue
+++ b/src/views/Item/ItemWrapper.vue
@@ -6,12 +6,13 @@
 <script>
 import { mapState } from 'vuex';
 import { itemCommon as routerGuard } from '@/router/router-guards';
+import NotFoundPage from '@/components/pages/NotFoundPage.vue';
 
 export default {
   name: 'ItemWrapper',
 
   components: {
-    NotFoundPage: () => import('@/components/pages/NotFoundPage.vue'),
+    NotFoundPage,
   },
 
   async beforeRouteUpdate(to, from, next) {
diff --git a/src/views/KeyResultHome.vue b/src/views/KeyResultHome.vue
index 8db0a156b..9760e8b1f 100644
--- a/src/views/KeyResultHome.vue
+++ b/src/views/KeyResultHome.vue
@@ -112,30 +112,35 @@
 </template>
 
 <script>
-import { mapGetters, mapState } from 'vuex';
 import { format } from 'd3-format';
+import { mapGetters, mapState } from 'vuex';
 import { max, min } from 'd3-array';
+import { PktButton, PktAlert } from '@oslokommune/punkt-vue2';
 import { db } from '@/config/firebaseConfig';
+import { getKeyResultProgressDetails } from '@/util/keyResultProgress';
+import ArchivedRestore from '@/components/ArchivedRestore.vue';
+import HTMLOutput from '@/components/HTMLOutput.vue';
 import KeyResult from '@/db/KeyResult';
-import Progress from '@/db/Progress';
+import KeyResultDrawer from '@/components/drawers/EditKeyResult.vue';
+import KeyResultProgressDetails from '@/components/KeyResultProgressDetails.vue';
+import KeyResultValueForm from '@/components/forms/KeyResultValueForm.vue';
 import LineChart from '@/util/LineChart';
-import { getKeyResultProgressDetails } from '@/util/keyResultProgress';
+import NotFoundPage from '@/components/pages/NotFoundPage.vue';
+import Progress from '@/db/Progress';
+import ProgressBar from '@/components/ProgressBar.vue';
 import routerGuard from '@/router/router-guards/keyResultHome';
-import WidgetWrapper from '@/components/widgets/WidgetWrapper.vue';
-import WidgetKeyResultNotes from '@/components/widgets/WidgetKeyResultNotes.vue';
 import WidgetKeyResultDetails from '@/components/widgets/WidgetKeyResultDetails.vue';
-import KeyResultProgressDetails from '@/components/KeyResultProgressDetails.vue';
+import WidgetKeyResultNotes from '@/components/widgets/WidgetKeyResultNotes.vue';
 import WidgetProgressHistory from '@/components/widgets/WidgetProgressHistory/WidgetProgressHistory.vue';
-import KeyResultValueForm from '@/components/forms/KeyResultValueForm.vue';
-import { PktButton } from '@oslokommune/punkt-vue2';
+import WidgetWrapper from '@/components/widgets/WidgetWrapper.vue';
 
 export default {
   name: 'KeyResultHome',
 
   components: {
-    NotFoundPage: () => import('@/components/pages/NotFoundPage.vue'),
-    ProgressBar: () => import('@/components/ProgressBar.vue'),
-    PktAlert: () => import('@oslokommune/punkt-vue2').then(({ PktAlert }) => PktAlert),
+    NotFoundPage,
+    ProgressBar,
+    PktAlert,
     KeyResultProgressDetails,
     KeyResultValueForm,
     Widget: WidgetWrapper,
@@ -143,9 +148,9 @@ export default {
     WidgetKeyResultNotes,
     WidgetProgressHistory,
     PktButton,
-    KeyResultDrawer: () => import('@/components/drawers/EditKeyResult.vue'),
-    ArchivedRestore: () => import('@/components/ArchivedRestore.vue'),
-    HTMLOutput: () => import('@/components/HTMLOutput.vue'),
+    KeyResultDrawer,
+    ArchivedRestore,
+    HTMLOutput,
   },
 
   beforeRouteUpdate: routerGuard,
diff --git a/src/views/NotFound.vue b/src/views/NotFound.vue
index d2d80d8ee..7d28aa728 100644
--- a/src/views/NotFound.vue
+++ b/src/views/NotFound.vue
@@ -4,11 +4,12 @@
 
 <script>
 import i18n from '@/locale/i18n';
+import NotFoundPage from '@/components/pages/NotFoundPage.vue';
 
 export default {
   name: 'NotFound',
   components: {
-    NotFoundPage: () => import('@/components/pages/NotFoundPage.vue'),
+    NotFoundPage,
   },
 
   metaInfo() {
diff --git a/src/views/ObjectiveHome.vue b/src/views/ObjectiveHome.vue
index 5479eee4d..c7f288ef6 100644
--- a/src/views/ObjectiveHome.vue
+++ b/src/views/ObjectiveHome.vue
@@ -87,30 +87,35 @@
 
 <script>
 import { mapGetters, mapState } from 'vuex';
+import { PktButton } from '@oslokommune/punkt-vue2';
+import ArchivedRestore from '@/components/ArchivedRestore.vue';
+import HTMLOutput from '@/components/HTMLOutput.vue';
+import KeyResultDrawer from '@/components/drawers/EditKeyResult.vue';
+import KeyResultsList from '@/components/KeyResultsList.vue';
+import NotFoundPage from '@/components/pages/NotFoundPage.vue';
 import Objective from '@/db/Objective';
+import ObjectiveDrawer from '@/components/drawers/EditObjective.vue';
+import ProgressionChart from '@/components/ProgressionChart.vue';
 import routerGuard from '@/router/router-guards/objectiveHome';
-import WidgetWrapper from '@/components/widgets/WidgetWrapper.vue';
 import WidgetObjectiveDetails from '@/components/widgets/WidgetObjectiveDetails.vue';
 import WidgetWeights from '@/components/widgets/WidgetWeights.vue';
-import ProgressionChart from '@/components/ProgressionChart.vue';
-import { PktButton } from '@oslokommune/punkt-vue2';
-import HTMLOutput from '@/components/HTMLOutput.vue';
+import WidgetWrapper from '@/components/widgets/WidgetWrapper.vue';
 
 export default {
   name: 'ObjectiveHome',
 
   components: {
-    KeyResultsList: () => import('@/components/KeyResultsList.vue'),
-    NotFoundPage: () => import('@/components/pages/NotFoundPage.vue'),
+    KeyResultsList,
+    NotFoundPage,
     Widget: WidgetWrapper,
     WidgetWeights,
     WidgetObjectiveDetails,
     ProgressionChart,
     PktButton,
     HTMLOutput,
-    ObjectiveDrawer: () => import('@/components/drawers/EditObjective.vue'),
-    KeyResultDrawer: () => import('@/components/drawers/EditKeyResult.vue'),
-    ArchivedRestore: () => import('@/components/ArchivedRestore.vue'),
+    ObjectiveDrawer,
+    KeyResultDrawer,
+    ArchivedRestore,
   },
 
   beforeRouteUpdate: routerGuard,