prerender.cjs

/**
 * 构建后预渲染脚本（SSG）
 *
 * 用 puppeteer-core 驱动系统 Chrome 把各路由渲染成带完整正文的静态 HTML，
 * 解决纯 CSR 下爬虫抓到空 <div id="root"> 导致不收录的问题。
 *
 * 产物：
 *   dist/index.html          ← 首页（覆盖 SPA 入口，含已渲染正文）
 *   dist/faq/index.html      ← FAQ 页
 *   dist/formats/index.html  ← 格式表页
 *
 * nginx 配合 try_files $uri $uri/ /index.html 即可按目录返回对应预渲染页。
 *
 * 用法：在 `yarn build` 末尾自动执行（见 package.json 的 build 脚本）。
 */
const path = require('path')
const fs = require('fs')
const http = require('http')
const puppeteer = require('puppeteer-core')

const distDir = path.join(__dirname, '..', 'dist')
const chromeUserDataDir = path.join(__dirname, '.chrome-prerender-profile')
const routes = ['/', '/faq', '/formats']

// 常见浏览器可执行文件路径（按优先级），避免依赖 puppeteer 自带 chromium 下载
const CHROME_CANDIDATES = [
  '/Applications/Google Chrome.app/Contents/MacOS/Google Chrome',
  '/Applications/Microsoft Edge.app/Contents/MacOS/Microsoft Edge',
  '/Applications/Chromium.app/Contents/MacOS/Chromium',
  '/usr/bin/google-chrome',
  '/usr/bin/chromium',
  '/usr/bin/chromium-browser',
]

function findChrome() {
  for (const p of CHROME_CANDIDATES) {
    if (fs.existsSync(p)) return p
  }
  throw new Error(
    '[prerender] 未找到系统 Chrome/Chromium，请安装 Google Chrome，或在 scripts/prerender.cjs 的 CHROME_CANDIDATES 中补充可执行文件路径。'
  )
}

const MIME = {
  '.html': 'text/html; charset=utf-8',
  '.js': 'text/javascript; charset=utf-8',
  '.mjs': 'text/javascript; charset=utf-8',
  '.css': 'text/css; charset=utf-8',
  '.json': 'application/json; charset=utf-8',
  '.svg': 'image/svg+xml',
  '.png': 'image/png',
  '.jpg': 'image/jpeg',
  '.jpeg': 'image/jpeg',
  '.gif': 'image/gif',
  '.ico': 'image/x-icon',
  '.webp': 'image/webp',
  '.woff': 'font/woff',
  '.woff2': 'font/woff2',
  '.txt': 'text/plain; charset=utf-8',
  '.xml': 'application/xml; charset=utf-8',
}

// 极简静态服务器：带文件扩展名的按文件返回，无扩展名的 SPA 路由回退到 index.html
function createServer(root) {
  const indexHtml = path.join(root, 'index.html')
  return http.createServer((req, res) => {
    const urlPath = decodeURIComponent(req.url.split('?')[0].split('#')[0])
    const filePath = path.join(root, urlPath)
    const hasExt = path.extname(urlPath) !== ''

    const sendFile = (file, status = 200) => {
      fs.readFile(file, (err, data) => {
        if (err) {
          res.writeHead(404, { 'Content-Type': 'text/plain' })
          res.end('Not Found')
          return
        }
        res.writeHead(status, {
          'Content-Type': MIME[path.extname(file)] || 'application/octet-stream',
        })
        res.end(data)
      })
    }

    // 有扩展名：尝试作为静态资源返回
    if (hasExt) {
      if (fs.existsSync(filePath) && fs.statSync(filePath).isFile()) {
        sendFile(filePath)
      } else {
        res.writeHead(404, { 'Content-Type': 'text/plain' })
        res.end('Not Found')
      }
      return
    }

    // 无扩展名：SPA 路由，返回 index.html（如 /faq、/formats）
    sendFile(indexHtml)
  })
}

;(async () => {
  if (!fs.existsSync(distDir)) {
    throw new Error('[prerender] dist 目录不存在，请先执行 vite build。')
  }

  const executablePath = findChrome()
  console.log('[prerender] 使用浏览器:', executablePath)

  // 启动静态服务器
  const server = createServer(distDir)
  await new Promise((resolve) => server.listen(0, '127.0.0.1', resolve))
  const port = server.address().port
  const baseURL = `http://127.0.0.1:${port}`
  console.log('[prerender] 静态服务器:', baseURL)

  const browser = await puppeteer.launch({
    executablePath,
    userDataDir: chromeUserDataDir,
    headless: true,
    args: [
      '--lang=zh-CN', // 强制中文环境，保证预渲染产物为站点主语言
      '--no-sandbox',
      '--disable-setuid-sandbox',
      '--disable-dev-shm-usage',
      '--disable-crash-reporter',
      '--disable-breakpad',
    ],
  })

  try {
    for (const route of routes) {
      const page = await browser.newPage()
      await page.setViewport({ width: 1440, height: 900 })
      // 屏蔽第三方请求（如统计脚本），避免产生构建期脏数据
      await page.setRequestInterception(true)
      page.on('request', (req) => {
        const u = req.url()
        if (u.startsWith(baseURL) || u.startsWith('data:') || u.startsWith('blob:')) {
          req.continue()
        } else {
          req.abort()
        }
      })

      // 收集控制台错误，便于排查渲染失败
      const errors = []
      page.on('console', (msg) => {
        if (msg.type() === 'error') {
          const text = msg.text()
          // 忽略第三方资源被拦截产生的 ERR_FAILED（构建期预期行为）
          if (text.includes('net::ERR_FAILED')) return
          errors.push(text)
        }
      })
      page.on('pageerror', (err) => errors.push(String(err)))

      await page.goto(`${baseURL}${route}`, {
        waitUntil: 'networkidle0',
        timeout: 30000,
      })

      // 等待 React 挂载（#root 出现子节点）
      await page.waitForFunction(
        () => document.querySelector('#root') && document.querySelector('#root').children.length > 0,
        { timeout: 15000 }
      )
      // 额外等待 i18n 初始化与副作用完成
      await new Promise((r) => setTimeout(r, 1500))

      const html = await page.content()
      const routePath = route === '/' ? '' : route
      const outDir = path.join(distDir, routePath)
      fs.mkdirSync(outDir, { recursive: true })
      const outFile = path.join(outDir, 'index.html')
      fs.writeFileSync(outFile, html.trim())

      const rootText = await page.evaluate(
        () => (document.querySelector('#root')?.textContent || '').replace(/\s+/g, ' ').slice(0, 80)
      )
      console.log(
        `[prerender] 已写入 ${path.relative(process.cwd(), outFile)}` +
          (errors.length ? ` ⚠️ 控制台错误: ${errors.length} 条` : '') +
          ` | 正文预览: ${rootText}`
      )
      if (errors.length) {
        errors.forEach((e) => console.log(`  └─ ${e}`))
      }
      await page.close()
    }
    console.log('[prerender] 完成')
  } finally {
    await browser.close()
    server.close()
  }
})().catch((err) => {
  console.error('[prerender] 失败:', err)
  process.exit(1)
})