diff --git a/components/DataTable.vue b/components/DataTable.vue
index 2a58b48ddf33c..3c56884b871a8 100644
--- a/components/DataTable.vue
+++ b/components/DataTable.vue
@@ -78,8 +78,9 @@
 
 <script>
 import ScaleLoader from 'vue-spinner/src/ScaleLoader.vue'
-import DataView from '@/components/DataView.vue'
-import DataViewBasicInfoPanel from '@/components/DataViewBasicInfoPanel.vue'
+const DataView = () => import('@/components/DataView.vue')
+const DataViewBasicInfoPanel = () =>
+  import('@/components/DataViewBasicInfoPanel.vue')
 
 export default {
   components: { DataView, DataViewBasicInfoPanel, ScaleLoader },
diff --git a/components/MetroBarChart.vue b/components/MetroBarChart.vue
index 58fcc3ffe6f09..2610b37b222ec 100644
--- a/components/MetroBarChart.vue
+++ b/components/MetroBarChart.vue
@@ -28,7 +28,7 @@
 </style>
 
 <script>
-import DataView from '@/components/DataView.vue'
+const DataView = () => import('@/components/DataView.vue')
 
 export default {
   components: { DataView },
diff --git a/components/SideNavigation.vue b/components/SideNavigation.vue
index 1f7e772f2aa3b..3a5997722e0e0 100644
--- a/components/SideNavigation.vue
+++ b/components/SideNavigation.vue
@@ -151,9 +151,9 @@
 
 <script>
 import ListItem from '@/components/ListItem'
-import LanguageSelector from '@/components/LanguageSelector.vue'
 import LogoAnimation from '@/components/Logo-Animation'
 import LogoAnimationSp from '@/components/Logo-Animation-sp.vue'
+const LanguageSelector = () => import('@/components/LanguageSelector.vue')
 
 export default {
   components: {
diff --git a/components/SvgCard.vue b/components/SvgCard.vue
index 0ab968f9e7eaf..be2cf509ac854 100644
--- a/components/SvgCard.vue
+++ b/components/SvgCard.vue
@@ -16,7 +16,7 @@
 </style>
 
 <script>
-import DataView from '@/components/DataView.vue'
+const DataView = () => import('@/components/DataView.vue')
 
 export default {
   components: { DataView },
diff --git a/components/TimeBarChart.vue b/components/TimeBarChart.vue
index c4023ba9e7ab6..a755511e62e5a 100644
--- a/components/TimeBarChart.vue
+++ b/components/TimeBarChart.vue
@@ -72,10 +72,11 @@
 
 <script>
 import ScaleLoader from 'vue-spinner/src/ScaleLoader.vue'
-import DataView from '@/components/DataView.vue'
-import DataSelector from '@/components/DataSelector.vue'
-import DataViewBasicInfoPanel from '@/components/DataViewBasicInfoPanel.vue'
-import DateSelectSlider from '@/components/DateSelectSlider.vue'
+const DataView = () => import('@/components/DataView.vue')
+const DataSelector = () => import('@/components/DataSelector.vue')
+const DataViewBasicInfoPanel = () =>
+  import('@/components/DataViewBasicInfoPanel.vue')
+const DateSelectSlider = () => import('@/components/DateSelectSlider.vue')
 
 export default {
   components: {
diff --git a/components/TimeStackedBarChart.vue b/components/TimeStackedBarChart.vue
index 357300c896170..f7323fe12c1f2 100644
--- a/components/TimeStackedBarChart.vue
+++ b/components/TimeStackedBarChart.vue
@@ -20,9 +20,10 @@
 </template>
 
 <script>
-import DataView from '@/components/DataView.vue'
-import DataSelector from '@/components/DataSelector.vue'
-import DataViewBasicInfoPanel from '@/components/DataViewBasicInfoPanel.vue'
+const DataView = () => import('@/components/DataView.vue')
+const DataSelector = () => import('@/components/DataSelector.vue')
+const DataViewBasicInfoPanel = () =>
+  import('@/components/DataViewBasicInfoPanel.vue')
 
 function cumulative(array) {
   const cumulativeArray = []
diff --git a/components/cards/ContactsCard.vue b/components/cards/ContactsCard.vue
index 0f081fa1a77b5..95cd183806ec8 100644
--- a/components/cards/ContactsCard.vue
+++ b/components/cards/ContactsCard.vue
@@ -14,9 +14,9 @@
 </template>
 
 <script>
-import TimeBarChart from '@/components/TimeBarChart.vue'
 import formatGraph from '@/utils/formatGraph.ts'
 import convertToDateFromData from '@/utils/convertToDateFromData'
+const TimeBarChart = () => import('@/components/TimeBarChart.vue')
 
 export default {
   name: 'ContactsCard',
diff --git a/components/cards/CurrentPatientsCard.vue b/components/cards/CurrentPatientsCard.vue
index a979b8b897020..549efc1c0ee58 100644
--- a/components/cards/CurrentPatientsCard.vue
+++ b/components/cards/CurrentPatientsCard.vue
@@ -20,9 +20,9 @@
 </template>
 
 <script>
-import TimeBarChart from '@/components/TimeBarChart.vue'
 import formatCurrentPatientsGraph from '@/utils/formatCurrentPatientsGraph'
 import convertToDateFromData from '@/utils/convertToDateFromData'
+const TimeBarChart = () => import('@/components/TimeBarChart.vue')
 export default {
   name: 'CurrentPatientsCard',
   components: {
diff --git a/components/cards/DischargesCard.vue b/components/cards/DischargesCard.vue
index e5198a0f03b68..585fd125eefee 100644
--- a/components/cards/DischargesCard.vue
+++ b/components/cards/DischargesCard.vue
@@ -20,9 +20,9 @@
 </template>
 
 <script>
-import TimeBarChart from '@/components/TimeBarChart.vue'
 import formatDischargesSummaryGraph from '@/utils/formatDischargesSummaryGraph'
 import convertToDateFromData from '@/utils/convertToDateFromData'
+const TimeBarChart = () => import('@/components/TimeBarChart.vue')
 
 export default {
   name: 'DischargesCard',
diff --git a/components/cards/InspectionsCard.vue b/components/cards/InspectionsCard.vue
index 521dcf1397d6a..42ee1e8f6d270 100644
--- a/components/cards/InspectionsCard.vue
+++ b/components/cards/InspectionsCard.vue
@@ -21,9 +21,9 @@
 </template>
 
 <script>
-import TimeBarChart from '@/components/TimeBarChart.vue'
 import formatInspectionsGraph from '@/utils/formatInspectionsGraph'
 import convertToDateFromData from '@/utils/convertToDateFromData'
+const TimeBarChart = () => import('@/components/TimeBarChart.vue')
 export default {
   name: 'InspectionsCard',
   components: {
diff --git a/components/cards/PatientsCard.vue b/components/cards/PatientsCard.vue
index 5c2cd05034b75..50cc79ab777d2 100644
--- a/components/cards/PatientsCard.vue
+++ b/components/cards/PatientsCard.vue
@@ -17,10 +17,10 @@
 </template>
 
 <script>
-import DataTable from '@/components/DataTable.vue'
 import formatTable from '@/utils/formatTable'
 import convertToDateFromData from '@/utils/convertToDateFromData'
 import formatPatientsSummaryGraph from '@/utils/formatPatientsSummaryGraph'
+const DataTable = () => import('@/components/DataTable.vue')
 
 export default {
   name: 'PatientsCard',
diff --git a/components/cards/PatientsSummaryCard.vue b/components/cards/PatientsSummaryCard.vue
index 5bb71f9ea73c2..f939aa5a741ce 100644
--- a/components/cards/PatientsSummaryCard.vue
+++ b/components/cards/PatientsSummaryCard.vue
@@ -15,9 +15,9 @@
 </template>
 
 <script>
-import TimeBarChart from '@/components/TimeBarChart.vue'
 import formatPatientsSummaryGraph from '@/utils/formatPatientsSummaryGraph'
 import convertToDateFromData from '@/utils/convertToDateFromData'
+const TimeBarChart = () => import('@/components/TimeBarChart.vue')
 
 export default {
   name: 'PatientsSummaryCard',
diff --git a/components/cards/QuerentsCard.vue b/components/cards/QuerentsCard.vue
index ddad68d570b36..853872e706643 100644
--- a/components/cards/QuerentsCard.vue
+++ b/components/cards/QuerentsCard.vue
@@ -14,9 +14,9 @@
 </template>
 
 <script>
-import TimeBarChart from '@/components/TimeBarChart.vue'
 import formatGraph from '@/utils/formatGraph'
 import convertToDateFromData from '@/utils/convertToDateFromData'
+const TimeBarChart = () => import('@/components/TimeBarChart.vue')
 
 export default {
   name: 'QuerentsCard',
diff --git a/pages/about.vue b/pages/about.vue
index 8a71416c94a5e..fd39c1276a73d 100644
--- a/pages/about.vue
+++ b/pages/about.vue
@@ -315,7 +315,7 @@
 <script lang="ts">
 import Vue from 'vue'
 import { MetaInfo } from 'vue-meta'
-import TextCard from '@/components/TextCard.vue'
+const TextCard = () => import('@/components/TextCard.vue')
 
 export default Vue.extend({
   components: {
diff --git a/pages/flow.vue b/pages/flow.vue
index 3766772d09989..e4c32cef0a6cf 100644
--- a/pages/flow.vue
+++ b/pages/flow.vue
@@ -191,7 +191,7 @@
 
 <script>
 import CovidIcon from '@/static/covid.svg'
-import DesktopFlowSvg from '@/components/DesktopFlowSvg.vue'
+const DesktopFlowSvg = () => import('@/components/DesktopFlowSvg.vue')
 export default {
   components: { CovidIcon, DesktopFlowSvg },
   head() {
diff --git a/pages/index.vue b/pages/index.vue
index 33d5dbdcb4e23..c38fd96214397 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -32,8 +32,6 @@
 </template>
 
 <script>
-import PageHeader from '@/components/PageHeader.vue'
-import WhatsNew from '@/components/WhatsNew.vue'
 import convertToDateFromData from '@/utils/convertToDateFromData.ts'
 import DischargesCard from '@/components/cards/DischargesCard.vue'
 import PatientsSummaryCard from '@/components/cards/PatientsSummaryCard.vue'
@@ -42,6 +40,8 @@ import ContactsCard from '@/components/cards/ContactsCard.vue'
 import QuerentsCard from '@/components/cards/QuerentsCard.vue'
 import CurrentPatientsCard from '@/components/cards/CurrentPatientsCard.vue'
 import InspectionsCard from '@/components/cards/InspectionsCard.vue'
+const PageHeader = () => import('@/components/PageHeader.vue')
+const WhatsNew = () => import('@/components/WhatsNew.vue')
 
 export default {
   components: {
diff --git a/pages/parent.vue b/pages/parent.vue
index 880518c8213eb..ed1c3068c137a 100644
--- a/pages/parent.vue
+++ b/pages/parent.vue
@@ -63,7 +63,7 @@
 </template>
 
 <script>
-import TextCard from '@/components/TextCard.vue'
+const TextCard = () => import('@/components/TextCard.vue')
 export default {
   components: {
     TextCard
diff --git a/pages/worker.vue b/pages/worker.vue
index 722b9dece65be..4cfc70ef9453e 100644
--- a/pages/worker.vue
+++ b/pages/worker.vue
@@ -35,7 +35,7 @@
 </template>
 
 <script>
-import TextCard from '@/components/TextCard.vue'
+const TextCard = () => import('@/components/TextCard.vue')
 export default {
   components: {
     TextCard