Reduced bundle size of app by removing HttpClient-Plugin and loading …

…it async
gfoidl-Tests · Jun 16, 2020 · c4b0413 · c4b0413
1 parent 1767f10
commit c4b0413
Show file tree

Hide file tree

Showing 7 changed files with 13 additions and 29 deletions.
diff --git a/frontend/src/index.html b/frontend/src/index.html
@@ -11,7 +11,7 @@
     <!--<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">-->
 </head>
 <body>
-    <app id="app"></app>
+    <app></app>
 
     <noscript>JavaScript isn't supported or turned off by your browser. Please enable it, to use this app.</noscript>
 </body>

diff --git a/frontend/src/ts/app.ts b/frontend/src/ts/app.ts
@@ -1,10 +1,8 @@
-import Vue              from "vue";
-import App              from "@/app.vue";
-import HttpClientPlugin from "@svc/httpclient-plugin";
-import Logger           from "@svc/logger";
+import Vue    from "vue";
+import App    from "@/app.vue";
+import Logger from "@svc/logger";
 //-----------------------------------------------------------------------------
 Vue.config.productionTip = false;
-Vue.use(HttpClientPlugin);
 Logger.init();
 //-----------------------------------------------------------------------------
 const app = new Vue({

diff --git a/frontend/src/ts/services/httpclient-plugin.ts b/frontend/src/ts/services/httpclient-plugin.ts
diff --git a/frontend/src/ts/services/logger.ts b/frontend/src/ts/services/logger.ts
@@ -1,5 +1,4 @@
-import Vue            from "vue";
-import { HttpClient } from "./httpclient";
+import Vue from "vue";
 //-----------------------------------------------------------------------------
 interface ErrorData {
     message: string;
@@ -57,9 +56,11 @@ export default class Logger {
         }
     }
     //-------------------------------------------------------------------------
-    private static logUnhandledException(error: ErrorData): void {
+    private static async logUnhandledException(error: ErrorData): Promise<void> {
         console.error("Unhandled error", error);
 
+        const HttpClient = (await import("./httpclient")).HttpClient;
+
         HttpClient.Default.post<void>("error/client", error);
         console.info("sent error info to server");
     }

diff --git a/frontend/src/ts/shims/vue-plugin-shims.d.ts b/frontend/src/ts/shims/vue-plugin-shims.d.ts
diff --git a/frontend/src/ts/views/main/greeting-service.ts b/frontend/src/ts/views/main/greeting-service.ts
@@ -1,11 +1,11 @@
-import { IHttpClient } from "@svc/httpclient";
-import HelloResponse   from "./hello-response";
+import { IHttpClient, HttpClient } from "@svc/httpclient";
+import HelloResponse               from "./hello-response";
 //-----------------------------------------------------------------------------
 export default class GreetingService {
     private readonly _httpClient: IHttpClient;
     //-------------------------------------------------------------------------
-    constructor(httpClient: IHttpClient) {
-        this._httpClient = httpClient;
+    constructor(httpClient?: IHttpClient) {
+        this._httpClient = httpClient ?? HttpClient.Default;
     }
     //-------------------------------------------------------------------------
     public async hello(name: string): Promise<string> {

diff --git a/frontend/src/ts/views/main/main.vue b/frontend/src/ts/views/main/main.vue
@@ -65,7 +65,7 @@
             console.debug("mounted at", new Date());
 
             // For Vue this won't work in the ctor, that's why it's here.
-            this.greetingService = new GreetingService(this.$http);
+            this.greetingService = new GreetingService();
         }
         //---------------------------------------------------------------------
         public async hello(): Promise<void> {