node.js - Puppeteer:如何在没有 CSS/JS/fonts/images 的情况下只加载 html？

Question

我正在使用 Puppeteer 来爬取一些数据，需要在相对较短的时间内访问许多页面。经过观察，我注意到这是非常低效的，因为我只对标记文件中的数据感兴趣，而包含所有图像、字体和其他内容的整个页面非常慢。因此，如果有一种方法可以跳过其他内容类型并使 Puppeteer 仅返回 HTML 文件内容，那就太好了。这是我的代码:

const browser = await puppeteer.launch({ headless: false });
const page = await browser.newPage();

const helperFile = fs.readFileSync("dist/app/scripts/helpers.js", "utf8");
await page.evaluateOnNewDocument(helperFile);

await login(page);
await postLogin(page);
await crawl(page); // this function is gonna call a lot of page.goTo(...)

await browser.close();

Answer 1

您可以拦截来自 Puppeteer 的所有请求，只允许将文档返回给 continue() 的请求，并丢弃其余请求。

我还决定包含 script 类型，因为 JS 代码可能会修改初始 DOM 树(类似于 appendChild(node))，如果您正在将 SPA 与现代固件/库(如 React)一起使用，其中服务器仅返回几个 JS 包以在客户端中生成 HTML。 script 和 fetch 类型存在，以防 JS 代码向服务器发出额外请求以获取更多数据并更新 DOM 树。

import puppeteer, { Page, PageEmittedEvents } from "puppeteer";

const htmlOnly = async (page: Page) => {
  await page.setRequestInterception(true); // enable request interception

  page.on(PageEmittedEvents.Request, (req) => {
    if (!["document", "xhr", "fetch", "script"].includes(req.resourceType())) {
      return req.abort();
    }
    req.continue();
  });
};

const browser = await puppeteer.launch({ headless: false });
const page = await browser.newPage();

await htmlOnly(page);