标签: critical-css
使用 Create React App 时如何隔离关键 CSS
由于无法编辑 webpack 配置文件，因此解决渲染阻塞 CSS 以及仅使用 Create React App 加载关键 CSS 的最佳方法是什么？
reactjs webpack create-react-app render-blocking critical-css
推荐指数
解决办法
查看次数
从服务器端渲染的 React 应用程序中删除渲染阻塞样式
我使用 chrome Lighthouse 工具对我的 React 应用程序进行了审计，它检测到我的应用程序有一些阻止渲染的 css 文件。我通过运行覆盖进行了进一步调查，并注意到我的应用程序有大约 50% 的未使用代码（CSS 和 JS）。
我尝试了各种插件，如：Critical、Penthouse、webpack-critical、webpack-plugin-critical、html-critical-webpack-plugin react-snap，以从应用程序中删除关键的 css，但没有一个有效，主要是因为所有插件这应该有助于期望应用程序使用 HTMLExtractPlugin。但是，这不适用于我，因为我的整个应用程序都在服务器上呈现并提供给客户端。
这是我服务器上的渲染功能：
const serverRenderer = () => (req, res) => {
const content = renderToString(
<Provider store={req.store}>
<App />
</Provider>
);
const state = JSON.stringify(req.store.getState());
return res.send(
`<!doctype html>
${renderToString(
<Html
css={[res.locals.assetPath('bundle.css'), res.locals.assetPath('vendor.css')]}
scripts={[res.locals.assetPath('bundle.js'), res.locals.assetPath('vendor.js')]}
state={state}
>
{content}
</Html>
)}`
);
};
export default serverRenderer;
HTML 组件
// @flow
/* eslint-disable react/no-danger */
import React from 'react';
import Helmet from 'react-helmet';
export default class HTML …推荐指数
解决办法
查看次数
如何最小化初始导航的关键请求深度？
我正在处理woff2文件类型的类似问题，并使其成功完成。
事实是，woff2文件存在于服务器中，并且能够在以下位置引用它：
<link rel="preload" href="fonts/fontawesome-webfont.woff2" as="font" type="font/woff2" crossorigin>。
正如我从PageSpeed Insights获得的一样，下面的图片内容是：
我该如何解决初始路径？
推荐指数
解决办法
查看次数