如何在 next.js 中延迟加载渲染阻塞 css？

Question

如何在 next.js 中延迟加载渲染阻塞 css？

正如你在下面的 next.js 代码中看到的，我试图通过在 href 属性中提供我的 main.css 文件路径来推迟加载渲染阻塞 css，但我正在努力在 next.js 中做到这一点。我想要的是在标签下的 _document.js 标签中加载关键 css 后，加载不在折叠上方的非关键 css。

_app.js

import App from "next/app"
import Head from "next/head"
import React from "react"
import { observer, Provider } from 'mobx-react'
import Layout from "../components/Layout"
import allStores from '../store'

export default class MyApp extends App {
componentDidMount = () => {
       
};
render() {
        const { Component, pageProps, header, footer,  } = this.props
        return (
            <>
                <Head >
                    <link rel="preload" href="path/to/main.css" as="style" 
                    onLoad="this.onload=null;this.rel='stylesheet'"></link>
                </Head>
                <Provider {...allStores}>
                    <Layout header={header}  footer={footer}>
                        <Component {...pageProps} />
                    </Layout>
                </Provider>
            </>
        )
    }
}

Run Code Online (Sandbox Code Playgroud)

Answer 1

小智 -2

<Head>根据文档，可能需要将其移至_document.js 而不是 _app.js 中。

归档时间：	5 年，5 月前
查看次数：	1490 次
最近记录：	4 年，6 月前