perf: use work thread

.vscode/settings.json

@@ -0,0 +1,2 @@
+{
+}

README.md

@@ -22,7 +22,7 @@ This is packages, an extension for node dependencies. Aims helping developers to
 
 ## Roadmap
 
-- [ ] Use `worker_threads` to avoid blocking the main thread.
+- [x] Use `worker_threads` to avoid blocking the main thread.
 
 ## Thanks
 

package.json

@@ -82,7 +82,7 @@
     }
   },
   "scripts": {
-    "build": "tsup src/index.ts --external vscode",
+    "build": "tsup --external vscode",
     "dev": "nr build --watch",
     "lint": "eslint .",
     "vscode:prepublish": "nr build",

src/api/index.ts

@@ -1,7 +1,5 @@
-import { window } from 'vscode'
 import type Item from '../core/Item'
 import { now, ttl } from '../utils/ttl'
-import { getWorkspaceFolderPath } from '../utils/resolve'
 import { dumpCache, loadCache } from './cache'
 import { version } from './version'
 import { protocolDep } from './utils'
@@ -12,12 +10,12 @@ const cacheTTL = 30 * 60_000 // 30min
 
 let cacheChanged = false
 
-interface PackageData {
+export interface PackageData {
   version: string[]
   info?: string
 }
 
-export async function getPackageData(item: Item): Promise<PackageData> {
+export async function getPackageData(item: Item, root: string): Promise<PackageData> {
   const preTest = protocolDep(item)
   if (preTest)
     return preTest
@@ -32,19 +30,19 @@ export async function getPackageData(item: Item): Promise<PackageData> {
     }
     else {
       // cache.delete(name)
-      reGetVersion(name)
+      reGetVersion(name, root)
     }
     return { version: cacheData.data }
   }
 
   return {
-    version: await reGetVersion(name),
+    version: await reGetVersion(name, root),
   }
 }
 
-async function reGetVersion(name: string) {
+async function reGetVersion(name: string, root: string) {
   try {
-    const root = getWorkspaceFolderPath(window.activeTextEditor)!
+    // const root = getWorkspaceFolderPath(window.activeTextEditor)!
     const data = await version(name, root)
 
     if (data) {

src/core/fetcher.ts

@@ -1,25 +1,29 @@
+import { Worker } from 'node:worker_threads'
+import path from 'node:path'
 import { CompletionItem, CompletionItemKind, CompletionList } from 'vscode'
-import PQueue from 'p-queue'
-import { getPackageData } from '../api'
 import compareVersions from '../semver/compareVersion'
 import { sortText } from '../providers/autoCompletion'
 import { statusBarItem } from '../ui/indicators'
+import type { PackageData } from '../api'
+import { getRoot } from '../utils/resolve'
 import type Item from './Item'
 import type Dependency from './Dependency'
 
-const queue = new PQueue({ concurrency: 10 })
+// const queue = new PQueue({ concurrency: 10 })
 
-export function fetchPackageVersions(
+export async function fetchPackageVersions(
   dependencies: Item[],
-): [Promise<Dependency[]>, Map<string, Dependency[]>] {
+): Promise<[Dependency[], Map<string, Dependency[]>]> {
   statusBarItem.setText('👀 Fetching npm')
 
   const responsesMap: Map<string, Dependency[]> = new Map()
 
-  const responses: Promise<Dependency>[] = dependencies.map(
-    async (item) => {
+  const packageData = await fetchPackageData(dependencies)
+
+  const responses = dependencies.map(
+    (item, index) => {
       try {
-        const data = await queue.add(() => getPackageData(item))
+        const data = packageData[index]
         if (!data)
           throw new Error('Get Package information failure')
 
@@ -66,5 +70,21 @@ export function fetchPackageVersions(
     },
   )
 
-  return [Promise.all(responses), responsesMap]
+  return [responses, responsesMap]
+}
+
+function fetchPackageData(
+  dependencies: Item[],
+): Promise<PackageData[]> {
+  return new Promise((resolve, reject) => {
+    const root = getRoot()
+
+    const worker = new Worker(path.resolve(__dirname, 'worker.js'), { workerData: { dependencies, root } })
+    worker.on('message', (data: PackageData[]) => {
+      resolve(data)
+    })
+    worker.on('error', (error) => {
+      reject(error)
+    })
+  })
 }

src/core/listener.ts

@@ -49,8 +49,8 @@ export async function parseAndDecorate(
   try {
     dependencies = parseDeps(text)
     if (fetchDeps || !fetchedDeps || !fetchedDepsMap) {
-      const data = fetchPackageVersions(dependencies)
-      fetchedDeps = await data[0]
+      const data = await fetchPackageVersions(dependencies)
+      fetchedDeps = data[0]
       fetchedDepsMap = data[1]
     }
     decorate(editor, fetchedDeps)

src/core/worker.ts

@@ -0,0 +1,11 @@
+import { parentPort, workerData } from 'node:worker_threads'
+import { getPackageData, saveCache } from '../api'
+import type Item from './Item'
+
+const { dependencies, root } = workerData as { dependencies: Item[]; root: string }
+const datasP = dependencies.map(item => getPackageData(item, root))
+
+Promise.all(datasP).then((datas) => {
+  parentPort?.postMessage(datas)
+  saveCache()
+})

src/index.ts

@@ -1,6 +1,5 @@
 import type { ExtensionContext } from 'vscode'
 import Commands from './commands/commands'
-import { saveCache } from './api'
 import { registerAutoCompletion } from './providers/autoCompletion'
 import { registerListener } from './core/listener'
 
@@ -11,5 +10,5 @@ export function activate(context: ExtensionContext) {
 }
 
 export function deactivate() {
-  saveCache()
+  // saveCache()
 }

src/utils/resolve.ts

@@ -1,5 +1,5 @@
 import type { TextDocument, TextEditor } from 'vscode'
-import { workspace } from 'vscode'
+import { window, workspace } from 'vscode'
 
 export function getWorkspaceFolderPath(
   documentOrEditor?: TextDocument | TextEditor,
@@ -17,3 +17,7 @@ function isEditor(
 ): documentOrEditor is TextEditor {
   return (documentOrEditor as any).document != null
 }
+
+export function getRoot() {
+  return getWorkspaceFolderPath(window.activeTextEditor)!
+}

tsup.config.ts

@@ -1,9 +1,10 @@
 import { defineConfig } from 'tsup'
 
 export default defineConfig({
-  entry: [
-    'src/index.ts',
-  ],
+  entry: {
+    index: 'src/index.ts',
+    worker: 'src/core/worker.ts',
+  },
   format: ['cjs'],
   shims: false,
   dts: false,