Performance improvement: Vueファイルのダイナミックインポート対応

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 },

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 },

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: {

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 },

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: {

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 = []

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',

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: {

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',

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: {

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',

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',

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',

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: {

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() {

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: {

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

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