如何配置Penthouse使其在启用JavaScript时获取关键CSS？

当然可以通过配置Penthouse的Puppeteer参数来启用JavaScript，解决动态元素无法被捕获的问题，具体操作如下：

• 打开你的webpack.mix.js文件，找到critical配置区块，在penthouse选项下添加puppeteer配置项，设置javascriptEnabled: true。如果页面需要等待JS渲染完成，还可以添加waitFor参数设置等待时长。

示例配置代码：

mix.critical({
    // 你的现有配置（比如src、dest等）
    penthouse: {
        width: 1920, // 首屏宽度
        height: 1080, // 首屏高度
        puppeteer: {
            javascriptEnabled: true,
            waitFor: 1500 // 等待1.5秒确保动态元素渲染完成
        }
    }
});

• 原理：Penthouse默认禁用JavaScript以加快处理速度，但通过开启puppeteer.javascriptEnabled，可以让底层的Puppeteer加载页面时执行JavaScript，渲染出依赖JS生成的动态元素，这样就能捕获到这些元素的关键CSS。

• 额外提示：

  • 开启JS后构建时间会有所增加，建议根据页面实际渲染速度调整waitFor的数值，避免等待过久或不足。
  • 如果页面有异步数据请求，可能需要配合waitForSelector等Puppeteer参数，等待特定元素加载完成后再生成关键CSS。

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