如何用Puppeteer提取Joomla网站关键JS代码优化加载速度

当然可以！针对你提到的Joomla网站因JavaScript执行导致的页面加载延迟问题，我这里有一段实用的Puppeteer代码片段，能利用它的startJSCoverage()和stopJSCoverage() API精准捕获页面首次渲染及关键交互所需的仅执行过的JS代码，帮你分离关键资源和可延迟资源。

完整代码示例 #

const puppeteer = require('puppeteer');
const fs = require('fs').promises;

(async () => {
  // 启动浏览器（无头模式，可改为false查看可视化过程）
  const browser = await puppeteer.launch({ headless: 'new' });
  const page = await browser.newPage();

  try {
    // 启动JavaScript覆盖率跟踪，重置导航时的覆盖数据
    await page.startJSCoverage({ resetOnNavigation: true });

    // 访问你的Joomla页面，等待网络空闲（确保关键资源加载完成）
    await page.goto('https://你的Joomla网站URL', { 
      waitUntil: 'networkidle2', // 当网络连接数≤2时视为加载完成
      timeout: 60000 // 超时时间，避免因页面加载慢导致失败
    });

    // 如果页面有动态渲染的内容（如Joomla模块的延迟加载），可添加等待或模拟交互
    // 比如等待2秒让动态内容加载：await page.waitForTimeout(2000);
    // 或者模拟滚动：await page.evaluate(() => window.scrollTo(0, document.body.scrollHeight));

    // 停止覆盖率跟踪并获取结果
    const coverage = await page.stopJSCoverage();

    // 收集所有被执行的关键JS代码片段
    let criticalJS = '';
    for (const entry of coverage) {
      // 跳过Chrome扩展或非目标网站的脚本
      if (entry.url.startsWith('chrome-extension://') || !entry.url.includes('你的网站域名')) {
        continue;
      }

      // 遍历每个脚本的覆盖范围，提取被执行的代码
      const source = entry.text;
      for (const range of entry.ranges) {
        criticalJS += source.slice(range.start, range.end) + '\n';
      }
    }

    // 将关键JS写入本地文件
    await fs.writeFile('critical-js.js', criticalJS);
    console.log('关键JS文件已生成：critical-js.js');

  } catch (error) {
    console.error('执行过程中出现错误：', error);
  } finally {
    // 关闭浏览器
    await browser.close();
  }
})();

代码关键部分说明 #

• 启动覆盖率跟踪：page.startJSCoverage({ resetOnNavigation: true }) 确保仅跟踪当前页面加载过程中的JS执行，不会包含之前导航的冗余数据。
• 页面加载策略：waitUntil: 'networkidle2' 等待网络请求降到最低，保证Joomla的核心JS和关键模块都已加载并执行。
• 过滤非目标脚本：跳过浏览器扩展或其他外部域名的脚本，只保留你网站自身的JS代码。
• 提取执行代码：通过遍历每个脚本的ranges数组，精准截取被实际执行的代码片段，剔除未使用的部分。

使用建议 #

1. 替换占位符：将代码中的https://你的Joomla网站URL和你的网站域名替换为实际地址。
2. 处理动态内容：如果你的Joomla页面有滚动加载、点击触发的动态内容，可添加模拟交互代码，确保捕获所有关键JS。
3. 手动校验：生成的critical-js.js可能需要手动调整依赖顺序，避免内联后出现执行错误。你可以将这段代码直接内联到页面的<head>标签中，或者作为单独的关键JS文件优先加载，其余非关键JS则延迟加载。
4. 重复测试：不同页面的关键JS可能不同，建议为每个核心页面单独生成对应的关键代码。

内容的提问来源于stack exchange，提问作者A. Amori