Puppeteer如何仅加载HTML，跳过CSS/JS/字体/图片等静态资源？

核心思路是开启Puppeteer的请求拦截功能，过滤掉图片、字体、样式表等非必要资源的加载请求，同时优化页面加载等待规则，大幅减少单页面等待时间。

具体实现步骤 #

• 开启页面请求拦截权限
• 编写拦截规则，仅放行HTML文档类请求，可根据自身需求调整允许加载的资源类型
• 优化page.goto的等待配置，无需等待全页面资源加载完成

修改后的代码示例 #

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

// 新增：开启请求拦截
await page.setRequestInterception(true);
page.on('request', (req) => {
  // 可根据自身需求调整允许加载的资源类型，这里仅放行HTML文档
  const allowedResourceTypes = ['document'];
  // 如果需要页面JS执行渲染、或者接口返回数据，可额外添加'script'、'xhr'、'fetch'到上面的数组里
  if (allowedResourceTypes.includes(req.resourceType())) {
    req.continue();
  } else {
    req.abort();
  }
});

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

await login(page);
await postLogin(page);
await crawl(page); 
// 额外优化：你可以在crawl函数内部的page.goto调用中添加配置，示例：
// await page.goto(url, {
//   waitUntil: 'domcontentloaded', // DOM解析完成就返回，不用等图片等资源加载
//   timeout: 10000 // 可自定义超时时间，避免长时间等待
// })

await browser.close();

注意事项 #

• 如果你的爬取逻辑依赖前端JS渲染的动态内容，不要拦截script类型资源，否则会导致页面无法正常渲染
• 如果需要请求后端接口获取数据，可将xhr、fetch添加到允许的资源类型数组中
• 拦截资源后页面不会加载样式和图片，可视情况下可将headless设置为true，进一步提升启动和运行效率

内容的提问来源于stack exchange，提问作者NearHuscarl