⚗ Lazy component import

components/collections/addCollection.vue

@@ -35,14 +35,12 @@
 </template>
 
 <script>
-import modal from "../../components/modal";
-
 export default {
   props: {
     show: Boolean
   },
   components: {
-    modal
+    modal: () => import("../../components/modal")
   },
   data() {
     return {

components/collections/addFolder.vue

@@ -35,8 +35,6 @@
 </template>
 
 <script>
-import modal from "../../components/modal";
-
 export default {
   props: {
     show: Boolean,
@@ -44,7 +42,7 @@ export default {
     collectionIndex: Number
   },
   components: {
-    modal
+    modal: () => import("../../components/modal")
   },
   data() {
     return {

components/collections/collection.vue

@@ -129,13 +129,10 @@ ul li {
 </style>
 
 <script>
-import folder from "./folder";
-import request from "./request";
-
 export default {
   components: {
-    folder,
-    request
+    folder: () => import("./folder"),
+    request: () => import("./request")
   },
   props: {
     collectionIndex: Number,

components/collections/editCollection.vue

@@ -40,8 +40,6 @@
 </template>
 
 <script>
-import modal from "../../components/modal";
-
 export default {
   props: {
     show: Boolean,
@@ -49,7 +47,7 @@ export default {
     editingCollectionIndex: Number
   },
   components: {
-    modal
+    modal: () => import("../../components/modal")
   },
   data() {
     return {

components/collections/editFolder.vue

@@ -40,8 +40,6 @@
 </template>
 
 <script>
-import modal from "../../components/modal";
-
 export default {
   props: {
     show: Boolean,
@@ -51,7 +49,7 @@ export default {
     folderIndex: Number
   },
   components: {
-    modal
+    modal: () => import("../../components/modal")
   },
   data() {
     return {

components/collections/editRequest.vue

@@ -72,8 +72,6 @@
 </template>
 
 <script>
-import modal from "../../components/modal";
-
 export default {
   props: {
     show: Boolean,
@@ -83,7 +81,7 @@ export default {
     requestIndex: Number
   },
   components: {
-    modal
+    modal: () => import("../../components/modal")
   },
   data() {
     return {

components/collections/folder.vue

@@ -88,8 +88,6 @@ ul li {
 </style>
 
 <script>
-import request from "./request";
-
 export default {
   props: {
     folder: Object,
@@ -97,7 +95,7 @@ export default {
     folderIndex: Number
   },
   components: {
-    request
+    request: () => import("./request")
   },
   data() {
     return {

components/collections/importExportCollections.vue

@@ -63,14 +63,12 @@
 </template>
 
 <script>
-import modal from "../../components/modal";
-
 export default {
   props: {
     show: Boolean
   },
   components: {
-    modal
+    modal: () => import("../../components/modal")
   },
   computed: {
     collectionJson() {

components/collections/index.vue

@@ -92,23 +92,15 @@ ul {
 </style>
 
 <script>
-import addCollection from "./addCollection";
-import addFolder from "./addFolder";
-import collection from "./collection";
-import editCollection from "./editCollection";
-import editFolder from "./editFolder";
-import editRequest from "./editRequest";
-import importExportCollections from "./importExportCollections";
-
 export default {
   components: {
-    addCollection,
-    addFolder,
-    collection,
-    editCollection,
-    editFolder,
-    editRequest,
-    importExportCollections
+    addCollection: () => import("./addCollection"),
+    addFolder: () => import("./addFolder"),
+    collection: () => import("./collection"),
+    editCollection: () => import("./editCollection"),
+    editFolder: () => import("./editFolder"),
+    editRequest: () => import("./editRequest"),
+    importExportCollections: () => import("./importExportCollections")
   },
   data() {
     return {

components/collections/saveRequestAs.vue

@@ -93,15 +93,13 @@
 </template>
 
 <script>
-import modal from "../../components/modal";
-
 export default {
   props: {
     show: Boolean,
     editingRequest: Object
   },
   components: {
-    modal
+    modal: () => import("../../components/modal")
   },
   data() {
     return {

components/history.vue

@@ -318,16 +318,14 @@ label {
 </style>
 
 <script>
-import VirtualList from "vue-virtual-scroll-list";
-import section from "./section";
 import { findStatusGroup } from "../pages/index";
 
 const updateOnLocalStorage = (propertyName, property) =>
   window.localStorage.setItem(propertyName, JSON.stringify(property));
 export default {
   components: {
-    "pw-section": section,
-    VirtualList
+    "pw-section": () => import("./section"),
+    VirtualList: () => import("vue-virtual-scroll-list")
   },
   data() {
     const localStorageHistory = JSON.parse(

layouts/default.vue

@@ -267,14 +267,12 @@
 
 <script>
 import intializePwa from "../assets/js/pwa";
-import logo from "../components/logo";
 import * as version from "../.postwoman/version.json";
-import modal from "../components/modal";
 
 export default {
   components: {
-    logo,
-    modal
+    logo: () => import("../components/logo"),
+    modal: () => import("../components/modal")
   },
 
   methods: {

pages/index.vue

@@ -747,18 +747,11 @@
   </div>
 </template>
 <script>
+import section from "../components/section";
 import url from "url";
 import querystring from "querystring";
-import autocomplete from "../components/autocomplete";
-import history from "../components/history";
-import section from "../components/section";
 import textareaAutoHeight from "../directives/textareaAutoHeight";
-import toggle from "../components/toggle";
-import modal from "../components/modal";
-import collections from "../components/collections";
-import saveRequestAs from "../components/collections/saveRequestAs";
 import parseCurlCommand from "../assets/js/curlparser.js";
-import AceEditor from "../components/ace-editor";
 import getEnvironmentVariablesFromScript from "../functions/preRequest";
 import parseTemplateString from "../functions/templating";
 
@@ -819,13 +812,13 @@ export default {
 
   components: {
     "pw-section": section,
-    "pw-toggle": toggle,
-    "pw-modal": modal,
-    history,
-    autocomplete,
-    collections,
-    saveRequestAs,
-    ResponseBody: AceEditor
+    "pw-toggle": () => import("../components/toggle"),
+    "pw-modal": () => import("../components/modal"),
+    history: () => import("../components/history"),
+    autocomplete: () => import("../components/autocomplete"),
+    collections: () => import("../components/collections"),
+    saveRequestAs: () => import("../components/collections/saveRequestAs"),
+    ResponseBody: () => import("../components/ace-editor")
   },
   data() {
     return {