使用 NextJS 预加载 .css 文件

Question

使用 NextJS 预加载 .css 文件

我们的网站使用 NextJS 和 Material-UI，加载页面后，它会给出 FOUC。我已经将问题范围缩小到 JS 加载速度比 .css 文件更快，所以我想知道是否有办法预加载 .css 文件？我们所有的页面都使用相同的 .css 文件，该文件位于/pages/styles.css

这是/pages/_app.js如果有任何帮助的话：

// pages/_app.js
import { Provider } from 'next-auth/client'
import { createMuiTheme } from '@material-ui/core/styles';
import { ThemeProvider } from '@material-ui/styles';
import styles from './styles.css'

import Layout from '../components/layout'
import Head from 'next/head'

const theme = createMuiTheme({
  palette: {
    primary: {
      main: "#2196f3", // blue
    },
    secondary: {
      main: "#d3d3d3", // gray
    },
  },
});

export default function _App ({ Component, pageProps }) {
  return (
    <ThemeProvider theme={theme}>
      <Provider options={{ clientMaxAge: 0, keepAlive: 0 }} session={pageProps.session}>
        <Layout>  
          {/* Head */}
          <Head>
            <title>Kevin Support</title>
            <link rel="icon" href="/static/favicon.png"/>
          </Head>

          {/* Page */}
          <Component {...pageProps} />
        </Layout>
      </Provider>
    </ThemeProvider>
  )
}

Run Code Online (Sandbox Code Playgroud)

Answer 1

Kei*_*eno -1

加载 CSS 文件，其中的<link>元素位于 head 内。浏览器的解析过程将确保在显示网站内容之前加载 CSS 文件。

在您当前的方法中，您加载的 CSS 是通过 JavaScript 加载的，在 FCP 呈现之后，CSS 将被解析。

您有 2 个选项可以解决此问题：

您可以将上面提到的 CSS 文件与<link>元素链接起来。
您获取 CSS 文件的文本内容并将其设置为元素innerHTML的文本内容<style>。

归档时间：	4 年，8 月前
查看次数：	8567 次
最近记录：	1 年，9 月前