perf: add async attribute for widget script (#10)

为 Search Widget 的 js 添加 async 属性，不再阻塞 HTML 的渲染。 /kind improvement ```release-note None ```
halo-dev · Jun 5, 2023 · 02dbc81 · 02dbc81
1 parent 0f1a833
commit 02dbc81
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 49 deletions.
diff --git a/packages/widget/src/index.ts b/packages/widget/src/index.ts
@@ -5,25 +5,18 @@ import "./styles/style.css";
 import "@halo-dev/search-widget/dist/style.css";
 
 // SearchWidget will mount this dom
-let container: HTMLElement | undefined;
-let root: HTMLElement | undefined;
-
-(() => {
-  document.addEventListener("DOMContentLoaded", () => {
-    container = document.createElement("div");
-    root = document.createElement("div");
-    const styleEl = document.createElement("link");
-    const shadowDOM = container.attachShadow?.({ mode: "open" }) || container;
-    styleEl.setAttribute("rel", "stylesheet");
-    styleEl.setAttribute(
-      "href",
-      "/plugins/PluginSearchWidget/assets/static/style.css"
-    );
-    shadowDOM.appendChild(styleEl);
-    shadowDOM.appendChild(root);
-    document.body.appendChild(container);
-  });
-})();
+const container = document.createElement("div");
+const root = document.createElement("div");
+const styleEl = document.createElement("link");
+const shadowDOM = container.attachShadow?.({ mode: "open" }) || container;
+styleEl.setAttribute("rel", "stylesheet");
+styleEl.setAttribute(
+  "href",
+  "/plugins/PluginSearchWidget/assets/static/style.css"
+);
+shadowDOM.appendChild(styleEl);
+shadowDOM.appendChild(root);
+document.body.appendChild(container);
 
 function createComponent() {
   if (!container || !root) {

diff --git a/packages/widget/vite.config.ts b/packages/widget/vite.config.ts
@@ -13,7 +13,7 @@ export default defineConfig({
     },
   },
   define: {
-    "process.env": process.env
+    "process.env": process.env,
   },
   build: {
     outDir: fileURLToPath(

diff --git a/src/main/java/run/halo/search/widget/SearchWidgetHeadProcessor.java b/src/main/java/run/halo/search/widget/SearchWidgetHeadProcessor.java
@@ -25,7 +25,7 @@ public Mono<Void> process(ITemplateContext context, IModel model,
     private String searchWidgetScript() {
         return """
                 <!-- PluginSearchWidget start -->
-                <script src="/plugins/PluginSearchWidget/assets/static/search-widget.iife.js"></script>
+                <script src="/plugins/PluginSearchWidget/assets/static/search-widget.iife.js" async></script>
                 <!-- PluginSearchWidget end -->
                 """;
     }