CSS 使用 React 和语义 UI 在 HTML 之后加载

Question

我有一个使用 SemanticUI 进行样式设置的 create-react-app 项目。我的 App 组件如下：

import React from 'react';
import './App.css'

import { LandingComponent } from '../components/landing/LandingComponent/index'
import { LoginComponent } from '../components/login/LoginComponent/index'
import { DashboardComponent } from '../components/dashboard/DashboardComponent/index'
import { MenuComponent } from '../components/menubar/MenuComponent/index'
import { BrowserRouter as Router, Route, Link } from "react-router-dom"

const App: React.FC = () => {
  return (
    <>
    <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css" />
      <MenuComponent />
      <Router>
        <Route exact path="/" component={() => <LandingComponent />} />
        <Route exact path="/login" component={() => <LoginComponent />} />
        <Route exact path="/dashboard" component={() => <DashboardComponent />} />
      </Router>
    </>
  );
}

export default App;

每当我在开发模式下工作时，我将能够在样式开始之前的几毫秒内看到原始 HTML。我认为在使用 npm run build

但是，在生产版本中，我遇到了同样的问题。我正在阅读其他有相同问题的人的帐户，有些人建议使用 mini-css-extract-plugin。但是，我想知道是否可以在不向我的项目添加任何额外插件的情况下解决这个问题？

Answer 1

是的，您想要实现的是将 CSS 资源加载为渲染阻塞资源，这意味着浏览器将在渲染内容之前先加载资源。

这与 React 或您的构建工具无关，而是网页的工作方式。

这可以通过将元素从您的 App 组件移动到您的文档来实现。因此，将您的行移动到 public 文件夹中的 index.html 文件。

您的 index.html 将如下所示：

<!DOCTYPE html>
<html lang="en">
   <head>
     <meta charset="utf-8" />
     ...
     <title>React App</title>
     <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css" />
   </head>
   <body>
   ...

请注意，从网络性能 point-of-view 来看，建议仅在您的 title 属性之后添加 CSS 资源，以便标题在浏览器开始抓取之前获得 "rendered" CSS 资源。

CSS 使用 React 和语义 UI 在 HTML 之后加载

CSS loads after HTML using React and SemanticUI

html

css

reactjs

semantic-ui