perf: make search servicer worker to inline

.fatherrc.ts

@@ -8,7 +8,10 @@ export default defineConfig({
   esm: {
     input: 'src/client',
     output: 'dist/client',
-    ignores: ['src/client/theme-default'],
+    ignores: [
+      'src/client/theme-default',
+      'src/client/theme-api/useSiteSearch/searchWorker.ts',
+    ],
     overrides: {
       'src/client/theme-default': {
         output: 'theme-default',

package.json

@@ -36,7 +36,7 @@
   ],
   "scripts": {
     "build": "father build",
-    "build:deps": "father prebundle",
+    "build:deps": "node scripts/pre-bundle-worker.js && father prebundle",
     "custom-install": "pnpm i",
     "dev": "father dev",
     "docs:build": "node ./bin/dumi.js build",
@@ -96,7 +96,6 @@
     "hast-util-to-estree": "^2.1.0",
     "hast-util-to-string": "^2.0.0",
     "heti": "^0.9.2",
-    "highlight-words-core": "^1.2.2",
     "html-to-text": "^8.2.1",
     "js-yaml": "^4.1.0",
     "lodash.throttle": "^4.1.1",
@@ -144,6 +143,7 @@
     "@umijs/plugins": "4.0.32",
     "eslint": "^8.20.0",
     "father": "^4.1.0",
+    "highlight-words-core": "^1.2.2",
     "husky": "^8.0.1",
     "lint-staged": "^13.0.3",
     "prettier": "^2.7.1",

scripts/pre-bundle-worker.js

@@ -0,0 +1,16 @@
+const path = require('path');
+const { build } = require('@umijs/bundler-utils/compiled/esbuild');
+
+// use esbuild to pre-bundle worker
+// why not ncc?
+// because it only works for Node.js package
+build({
+  entryPoints: ['src/client/theme-api/useSiteSearch/searchWorker'],
+  absWorkingDir: path.dirname(__dirname),
+  outfile: 'compiled/_internal/searchWorker.min.js',
+  bundle: true,
+  minify: true,
+  logLevel: 'silent',
+  target: 'es6',
+  format: 'iife',
+});

src/client/theme-api/useSiteSearch/index.ts

@@ -1,13 +1,38 @@
 import { useNavData, useSiteData } from 'dumi';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { useLocaleDocRoutes } from '../utils';
-import type { ISearchResult } from './worker';
+// @ts-ignore
+import workerCode from '-!../../../../compiled/_internal/searchWorker.min?dumi-raw';
+
+export interface IHighlightText {
+  highlighted?: boolean;
+  text: string;
+}
+
+export interface ISearchNavResult {
+  title?: string;
+  priority: number;
+  hints: {
+    type: 'page' | 'title' | 'demo' | 'content';
+    link: string;
+    priority: number;
+    highlightTitleTexts: IHighlightText[];
+    highlightTexts: IHighlightText[];
+  }[];
+}
+
+export type ISearchResult = ISearchNavResult[];
 
 let worker: Worker;
 
 // for ssr
 if (typeof window !== 'undefined') {
-  worker = new Worker(new URL('./worker', import.meta.url));
+  // use blob to avoid generate entry(chunk) for worker
+  worker = new Worker(
+    URL.createObjectURL(
+      new Blob([workerCode], { type: 'application/javascript' }),
+    ),
+  );
 }
 
 export const useSiteSearch = () => {

src/client/theme-api/useSiteSearch/worker.ts → src/client/theme-api/useSiteSearch/searchWorker.ts

@@ -1,28 +1,10 @@
 import type { useAppData, useNavData, useSiteData } from 'dumi';
 import { findAll } from 'highlight-words-core';
+import type { IHighlightText, ISearchNavResult, ISearchResult } from '.';
 import type { IRouteMeta } from '../types';
 
 const TAB_QUERY_KEY = 'tab';
 
-interface IHighlightText {
-  highlighted?: boolean;
-  text: string;
-}
-
-interface ISearchNavResult {
-  title?: string;
-  priority: number;
-  hints: {
-    type: 'page' | 'title' | 'demo' | 'content';
-    link: string;
-    priority: number;
-    highlightTitleTexts: IHighlightText[];
-    highlightTexts: IHighlightText[];
-  }[];
-}
-
-export type ISearchResult = ISearchNavResult[];
-
 type ISearchMetadata = {
   navTitle?: string;
   navOrder: number;

src/constants.ts

@@ -22,7 +22,6 @@ export const CLIENT_DEPS = [
   '@ant-design/icons-svg',
   '@makotot/ghostui',
   'deepmerge',
-  'highlight-words-core',
   'lodash.throttle',
   'prism-react-renderer',
   'prismjs',

src/features/theme/index.ts

@@ -86,8 +86,6 @@ export default (api: IApi) => {
       'dumi/theme-default',
       // for svgr
       '@ant-design/icons-svg',
-      // for search service worker
-      'highlight-words-core',
       getPkgThemeName(api),
     ]
       .filter(Boolean)