Add component's lazy loading

src/App.vue

@@ -13,14 +13,13 @@
 import { mapState } from "vuex";
 import Footer from "@/components/Footer";
 import Header from "@/components/Header";
-import AddFruit from "@/components/AddFruit";
 
 export default {
   name: "App",
   components: {
     Footer,
     Header,
-    AddFruit
+    AddFruit: () => import("@/components/AddFruit")
   },
   computed: {
     ...mapState(["modalIsOpen"])

src/components/Form/ImageUnsplash/ImageUnsplash.vue

@@ -30,12 +30,11 @@
 
 <script>
 import { mapState } from "vuex";
-import ImageSkeleton from "./ImageSkeleton";
 
 export default {
   name: "ImageUnsplash",
   components: {
-    ImageSkeleton
+    ImageSkeleton: () => import("./ImageSkeleton")
   },
   props: {
     containerClass: {

src/components/Grid/Grid.vue

@@ -15,13 +15,12 @@
 <script>
 import { mapState } from "vuex";
 import GridItemSkeleton from "./GridItemSkeleton";
-import GridItem from "./GridItem";
 
 export default {
   name: "Grid",
   components: {
     GridItemSkeleton,
-    GridItem
+    GridItem: () => import("./GridItem")
   },
   props: {
     data: Array

src/components/Grid/GridItem.vue

@@ -21,11 +21,10 @@
 
 <script>
 import { mapState } from "vuex";
-import DeleteItem from "./DeleteItem";
 
 export default {
   name: "GridItem",
-  components: { DeleteItem },
+  components: { DeleteItem: () => import("./DeleteItem") },
   props: {
     item: Object
   },

src/views/Fruit.vue

@@ -26,11 +26,10 @@
 
 <script>
 import { mapState } from "vuex";
-import DeleteItem from "@/components/Grid/DeleteItem";
 
 export default {
   name: "FruitDetails",
-  components: { DeleteItem },
+  components: { DeleteItem: () => import("@/components/Grid/DeleteItem") },
   data() {
     return {
       modalOpen: true

src/views/Fruits.vue

@@ -11,11 +11,10 @@
 
 <script>
 import { mapState } from "vuex";
-import Grid from "@/components/Grid/Grid";
 
 export default {
   name: "Fruits",
-  components: { Grid },
+  components: { Grid: () => import("@/components/Grid/Grid") },
   computed: {
     ...mapState(["fruits"])
   },