web: reduce bundle size

web/app/App.vue

@@ -17,6 +17,14 @@
 </template>
 
 <script>
+import BCollapse from 'bootstrap-vue/es/components/collapse/collapse';
+import BNav from 'bootstrap-vue/es/components/nav/nav';
+import BNavItem from 'bootstrap-vue/es/components/nav/nav-item';
+import BNavbar from 'bootstrap-vue/es/components/navbar/navbar';
+import BNavbarBrand from 'bootstrap-vue/es/components/navbar/navbar-brand';
+import BNavbarNav from 'bootstrap-vue/es/components/navbar/navbar-nav';
+import BNavbarToggle from 'bootstrap-vue/es/components/navbar/navbar-toggle';
+
 import API from "./API";
 import { AUTH_URI } from "./API";
 
@@ -42,7 +50,8 @@ export default {
     authUri() {
       return AUTH_URI;
     }
-  }
+  },
+  components: {BCollapse, BNav, BNavItem, BNavbar, BNavbarBrand, BNavbarNav, BNavbarToggle}
 };
 </script>
 
@@ -55,7 +64,21 @@ $container-max-widths: (
   xl: 960px,
 ) !default;
 
-@import '~bootstrap/scss/bootstrap.scss';
+
+@import '~bootstrap/scss/_functions';
+@import '~bootstrap/scss/_variables';
+@import '~bootstrap/scss/_mixins';
+
+@import '~bootstrap/scss/_buttons';
+@import '~bootstrap/scss/_code';
+@import '~bootstrap/scss/_forms';
+@import '~bootstrap/scss/_grid';
+@import '~bootstrap/scss/_nav';
+@import '~bootstrap/scss/_navbar';
+@import '~bootstrap/scss/_reboot';
+@import '~bootstrap/scss/_type';
+@import '~bootstrap/scss/_utilities';
+
 @import '~bootstrap-vue/src/index.scss';
 </style>
 

web/app/MemberCard.vue

@@ -26,7 +26,9 @@
 </template>
 
 <script>
-import { CalendarIcon, HashIcon, MessageCircleIcon } from "vue-feather-icons";
+import CalendarIcon from "vue-feather-icons/icons/CalendarIcon";
+import HashIcon from "vue-feather-icons/icons/HashIcon";
+import MessageCircleIcon from "vue-feather-icons/icons/MessageCircleIcon";
 
 export default {
   props: ["member"],

web/app/SystemEditPage.vue

@@ -31,6 +31,15 @@
 </template>
 
 <script>
+import BButton from 'bootstrap-vue/es/components/button/button';
+import BContainer from 'bootstrap-vue/es/components/layout/container';
+import BLink from 'bootstrap-vue/es/components/link/link';
+import BSpinner from 'bootstrap-vue/es/components/spinner/spinner';
+import BForm from 'bootstrap-vue/es/components/form/form';
+import BFormInput from 'bootstrap-vue/es/components/form-input/form-input';
+import BFormGroup from 'bootstrap-vue/es/components/form-group/form-group';
+import BFormTextarea from 'bootstrap-vue/es/components/form-textarea/form-textarea';
+
 import API from "./API";
 
 export default {
@@ -64,7 +73,8 @@ export default {
             }
             this.saving = false;
         }
-    }
+    },
+    components: {BButton, BContainer, BLink, BSpinner, BForm, BFormGroup, BFormInput, BFormTextarea}
 }
 </script>
 

web/app/SystemPage.vue

@@ -36,9 +36,16 @@
 <script>
 import API from "./API";
 
+import BContainer from 'bootstrap-vue/es/components/layout/container';
+import BLink from 'bootstrap-vue/es/components/link/link';
+import BSpinner from 'bootstrap-vue/es/components/spinner/spinner';
+
 import MemberCard from "./MemberCard.vue";
 
-import { Edit2Icon, ClockIcon, HashIcon, TagIcon } from "vue-feather-icons";
+import Edit2Icon from "vue-feather-icons/icons/Edit2Icon";
+import ClockIcon from "vue-feather-icons/icons/ClockIcon";
+import HashIcon from "vue-feather-icons/icons/HashIcon";
+import TagIcon from "vue-feather-icons/icons/TagIcon";
 
 export default {
   data() {
@@ -79,7 +86,8 @@ export default {
     ClockIcon,
     HashIcon,
     TagIcon,
-    MemberCard
+    MemberCard,
+    BContainer, BLink, BSpinner
   }
 };
 </script>

web/app/index.js

@@ -1,15 +1,14 @@
 import Vue from "vue";
-import VueRouter from "vue-router";
-import BootstrapVue from "bootstrap-vue";
-Vue.use(VueRouter);
-Vue.use(BootstrapVue);
 
-import App from "./App.vue";
+import VueRouter from "vue-router";
-import HomePage from "./HomePage.vue";
+Vue.use(VueRouter);
-import SystemPage from "./SystemPage.vue";
+
-import SystemEditPage from "./SystemEditPage.vue";
+const App = () => import("./App.vue");
-import MemberEditPage from "./MemberEditPage.vue";
+const HomePage = () => import("./HomePage.vue");
-import OAuthRedirectPage from "./OAuthRedirectPage.vue";
+const SystemPage = () => import("./SystemPage.vue");
+const SystemEditPage = () => import("./SystemEditPage.vue");
+const MemberEditPage = () => import("./MemberEditPage.vue");
+const OAuthRedirectPage = () => import("./OAuthRedirectPage.vue");
 
 const router = new VueRouter({
     mode: "history",

web/package.json

@@ -5,7 +5,6 @@
     "eventemitter3": "^3.1.0",
     "vue": "^2.6.10",
     "vue-feather-icons": "^4.10.0",
-    "vue-hot-reload-api": "^2.3.3",
     "vue-router": "^3.0.2"
   },
   "devDependencies": {