问题标签 [critical-css]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
node.js - AWS Lambda 中的 Node Crtical/Penthouse
由于上传文件AWS Lambda有 250MB 的限制，我该如何设置节点项目并使用Critical？主要是包没有问题，但它的依赖项Puppeteer是使用铬。如果我将使用 puppeteer 以外的其他工具，我怎样才能使关键不使用puppeteer二进制文件？我对 AWS 和 nodejs 很陌生。
node.js - ERR_INVALID_ARG_TYPE 使用 webpack 运行criticalcss
使用以下webpack.mix.js文件
当我跑步时，npm run production我得到：
发出 HtmlCriticalWebpackPlugin(node:58149) UnhandledPromiseRejectionWarning: TypeError [ERR_INVALID_ARG_TYPE] 后 98%：“数据”参数必须是字符串类型或 Buffer、TypedArray 或 DataView 的实例。收到未定义。
令人困惑的是，在某一时刻这工作正常。我的 URL 列表比我上面显示的要长。我第一次尝试它时，它成功输出了 CSS 文件，但我遇到了超时问题，所以开始一次做几个。
在出现上述错误之前，我能够成功运行它两三次，现在它不会再编译了。我什至回去尝试了我之前尝试过的相同捆绑包，但第二次就不行了。
我也尝试过使用 Gulp 进行类似的设置，但得到了同样的错误。
有没有其他人得到过这个？你是怎么解决的？
javascript - 通过 Webpacker 在 Rails 中使用 Webpack 插件
我希望自动构建一个内联到我的 application.html.erb 视图文件中的关键 CSS 文件。
问题是我不确定如何将 Webpack 插件集成到我的应用程序中。我不确定要修改哪个文件以及如何修改该文章与 Webpacker 无关。
我拥有的文件是：
webpacker.yml：
webpack/development.js：
webpack/environment.js：
webpack/production.js：
谁能指出我正确的方向以及如何实现这一目标？
提前致谢！
jquery - 砌体与关键 CSS 相结合
我在我的网站上使用 cricticalcss.com 来自动生成criticalcss。这似乎工作得很好。除了，我的页面底部有一个砖石网格。那个格子好像坏了。
砌体以这种方式加载：
由于关键的 CSS，CSS 没有很好地加载。是否可以在可见时加载砌体或其他东西？
magento2 - Magento 2关键CSS文件位置
有没有办法在<title>标签后包含内联样式，如图所示：
如果我编辑文件default_head_blocks.xml，我只能在合并的 css 文件之后显示它，这违背了使用关键 css 的目的。一种可能的方法是将这段代码添加到其中default.xml，然后将内联 css 呈现<head>在所有<meta>标签之前的顶部，所以我不确定这是否是不好的做法
javascript - Grunt Critical CSS 在 Drupal 7 站点上有问题
运行 "criticalcss:article" (criticalcss) 任务 [D] 任务来源：/var/www/urbanmelbourne/node_modules/grunt-criticalcss/tasks/criticalcss.js phantomjs 出了点问题...致命错误：PHANTOM ERROR：ReferenceError：找不到变量：符号
痕迹：
- > http://local.urban.com.au/sites/all/libraries/jquery.event.move/js/jquery.event.move.js?qscytd：83
- > http://local.urban.com.au/sites/all/libraries/jquery.event.move/js/jquery.event.move.js?qscytd：31
这是我的 Gruntfile.js（位于站点的根目录中）
javascript - 视频 JS 播放器的关键 CSS 中断
有人对视频 JS 播放器有特别的问题吗？( https://videojs.com/ )
出于某种原因，我无法使用 Video JS 正确生成我的关键 CSS。每次我进行构建时，它都会处理并提供我的内联 CSS，但视频播放器中的实际样式却一团糟——有很多隐藏的元素永远不会显示。
我的 Plyr ( https://plyr.io/ ) 没有这个问题，我的任何网站上都没有其他问题 - 它只是 Video JS 元素。
有任何想法吗？
如果需要，我可以放一个完整的例子，这是我的 Gulp 文件中的关键 CSS 任务：
javascript - 如何为 renderToNodeStream (React SSR) 块收集关键 css
我想critical-css为React SSR. 有很多方法可以实现这一点，但我对这种方法特别感兴趣——我计划在 react 渲染 html 后即时收集它。我在服务器上有 css，我想从中内联只需要的 css 并异步加载其余部分（我不确定性能，但我看到生产解决方案使用 purifyCSS 等工具执行此操作，所以我打算试一试并测量它表现）
问题 #1 - 关键 CSS 提取
我的 SSR 设置是基于renderToNodeStream而不是renderToString所以我不能这么容易地将 html 与 css 进行比较 - 块可能只是一段无效的 html 而没有结束标签。在这种情况下，如何有效地正确解析类名？我猜RegExp在这里可能会很慢？
问题 #2 - 将样式内联到 html 块中
我的计划是获取chunk of html来自renderToNodeStream并内联对应css的响应 - 所以它的工作方式类似于interleaveWithStyles方法styled-components
这是块在styled-components处理它后的样子——<style>节点可能被插入到中间<svg>——我想这不是问题，只要我最终会加载完整的 css，但这并不安全，因为这个节点可能很容易被删除，例如通过反应水合物。那么使用内联 css 丰富 html 流的正确方法是什么？
html - 如何在服务器端渲染中将样式应用于 Next.js 中的 HTML？
访问Next.js并注意网络选项卡中的页面请求。预览不仅显示 HTML，而且显示完全预先设置样式的页面。
当我们使用它们时Styled-Components，Material-UI它们已经暴露ServerStyleSheet了用于为 HTML 中的第一次渲染提供所需的样式。
我们如何在使用react-bootstrap或自定义 CSS时获得相同的输出test.css？
laravel - Docker 中的 Laravel-mix-criticalcss 无法读取属性“内容类型”
我正在尝试在 Docker 容器中设置laravel-mix-criticalcss，但出现错误。有没有人遇到过这个？
错误
[webpack-cli] TypeError：无法在 /var/www/html 处读取临时未定义的属性“内容类型”（/var/www/html/node_modules/critical/lib/file-helper.js:112:37） /node_modules/critical/lib/file-helper.js:214:27 at runMicrotasks () at processTicksAndRejections (internal/process/task_queues.js:97:5) 错误命令失败，退出代码为 2。
webpack.mix.js
