fix: build analyzer, close #701

Author: antfu

packages/devtools/client/components/BuildAnalyzeDetails.vue

@@ -12,7 +12,8 @@ const props = defineProps<{
 }>()
 
 const runtimeConfig = useRuntimeConfig()
-const ROUTE_ANALYZE = `${runtimeConfig.app.baseURL}/__nuxt_devtools__/analyze/`.replace(/\/+/g, '/')
+const CLIENT_BASE = '/__nuxt_devtools__/client'
+const ROUTE_ANALYZE = `${runtimeConfig.app.baseURL.replace(CLIENT_BASE, '/')}/__nuxt_devtools__/analyze/`.replace(/\/+/g, '/')
 
 const tabs = computed(() => {
   const items = [
@@ -95,7 +96,7 @@ async function clear(name: string) {
             <div>{{ formatFileSize(current.size.clientBundle) }}</div>
           </div>
         </template>
-        <template v-if="current.size.nitroBundle">
+        <template v-if="current.size?.nitroBundle">
           <div i-carbon-bare-metal-server text-xl />
           <div>
             <div text-sm op50>

packages/devtools/src/module-main.ts

@@ -109,7 +109,6 @@ window.__NUXT_DEVTOOLS_TIME_METRIC__.appInit = Date.now()
   addVitePlugin(vitePlugin)
 
   const clientDirExists = existsSync(clientDir)
-  const analyzeDir = join(nuxt.options.rootDir, '.nuxt/analyze')
 
   nuxt.hook('vite:extendConfig', (config) => {
     config.server ||= {}
@@ -124,6 +123,7 @@ window.__NUXT_DEVTOOLS_TIME_METRIC__.appInit = Date.now()
     if (!Array.isArray(config.server.watch.ignored))
       config.server.watch.ignored = [config.server.watch.ignored]
     config.server.watch.ignored.push('**/.nuxt/analyze/**')
+    config.server.watch.ignored.push('**/.cache/nuxt-devtools/**')
   })
 
   nuxt.hook('imports:extend', (imports) => {
@@ -141,7 +141,10 @@ window.__NUXT_DEVTOOLS_TIME_METRIC__.appInit = Date.now()
 
   // TODO: Use WS from nitro server when possible
   nuxt.hook('vite:serverCreated', (server: ViteDevServer) => {
-    server.middlewares.use(ROUTE_ANALYZE, sirv(analyzeDir, { single: false, dev: true }))
+    const devtoolsAnalyzeDir = join(nuxt.options.rootDir, 'node_modules/.cache/nuxt-devtools/analyze')
+
+    server.middlewares.use(ROUTE_ANALYZE, sirv(devtoolsAnalyzeDir, { single: false, dev: true, dotfiles: true, ignores: false }))
+
     // Serve the front end in production
     if (clientDirExists) {
       const indexHtmlPath = join(clientDir, 'index.html')

packages/devtools/src/server-rpc/analyze-build.ts

@@ -13,7 +13,7 @@ export function setupAnalyzeBuildRPC({ nuxt, refresh, ensureDevAuthToken }: Nuxt
   let initalized: Promise<any> | undefined
 
   const processId = 'devtools:analyze-build'
-  const analyzeDir = join(nuxt.options.rootDir, '.nuxt/analyze')
+  const devtoolsAnalyzeDir = join(nuxt.options.rootDir, 'node_modules/.cache/nuxt-devtools/analyze')
 
   async function startAnalyzeBuild(name: string) {
     if (promise)
@@ -31,6 +31,7 @@ export function setupAnalyzeBuildRPC({ nuxt, refresh, ensureDevAuthToken }: Nuxt
 
     refresh('getAnalyzeBuildInfo')
 
+    initalized = undefined
     promise = result.getProcess()
       .then(() => {
         refresh('getAnalyzeBuildInfo')
@@ -46,7 +47,29 @@ export function setupAnalyzeBuildRPC({ nuxt, refresh, ensureDevAuthToken }: Nuxt
   }
 
   async function readBuildInfo() {
-    const files = await glob(['*/meta.json'], { cwd: analyzeDir, onlyFiles: true, absolute: true })
+    for (const dir of new Set([
+      join(nuxt.options.rootDir, '.nuxt/analyze'),
+      join(nuxt.options.rootDir, 'node_modules/.cache/nuxt/.nuxt/analyze'),
+      nuxt.options.analyzeDir,
+    ])) {
+      const files = await glob(['**/meta.json', 'meta.json'], {
+        cwd: dir,
+        onlyFiles: true,
+        absolute: true,
+      })
+      for (const file of files) {
+        const slug = JSON.parse(await fsp.readFile(file, 'utf-8')).slug
+        const dir = dirname(file)
+        await fsp.mkdir(devtoolsAnalyzeDir, { recursive: true })
+        await fsp.rename(dir, join(devtoolsAnalyzeDir, slug))
+      }
+    }
+
+    const files = await glob(['**/meta.json'], {
+      cwd: devtoolsAnalyzeDir,
+      onlyFiles: true,
+      absolute: true,
+    })
     builds = await Promise.all(files.map(async (file) => {
       const dir = dirname(file)
       const json = JSON.parse(await fsp.readFile(file, 'utf-8')) as NuxtAnalyzeMeta
@@ -93,11 +116,11 @@ export function setupAnalyzeBuildRPC({ nuxt, refresh, ensureDevAuthToken }: Nuxt
       await ensureDevAuthToken(token)
 
       if (!names) {
-        await fsp.rm(analyzeDir, { recursive: true, force: true })
+        await fsp.rm(devtoolsAnalyzeDir, { recursive: true, force: true })
       }
       else {
         const targets = builds.filter(build => names.includes(build.name))
-        await Promise.all(targets.map(target => fsp.rm(join(analyzeDir, target.slug), { recursive: true, force: true })))
+        await Promise.all(targets.map(target => fsp.rm(join(devtoolsAnalyzeDir, target.slug), { recursive: true, force: true })))
       }
       initalized = readBuildInfo()
       refresh('getAnalyzeBuildInfo')