面试题：Next.js 与 styled - components 的性能优化

可能导致性能问题的原因

样式的重复计算：在每个页面使用 styled - components 时，可能存在样式的重复计算，例如相同的基础样式在不同页面重复渲染计算。
客户端样式加载延迟：如果所有样式都在客户端加载并渲染，会导致页面在样式加载完成前呈现无样式内容（FOUC），影响用户体验。
样式复杂度：复杂的嵌套样式和大量的媒体查询可能导致浏览器渲染性能下降。

优化思路

服务器端渲染（SSR）与 styled - components 结合
- 思路：通过 Next.js 的 SSR 能力，在服务器端生成带有样式的 HTML 页面。styled - components 可以在服务器端生成 CSS 并注入到 HTML 中，减少客户端样式加载和计算的时间。
- 关键代码示例：

// _app.js
import React from'react';
import { ServerStyleSheet } from'styled - components';
import App from 'next/app';

export default class MyApp extends App {
    render() {
        const sheet = new ServerStyleSheet();
        const page = sheet.collectStyles(<this.props.Component {...this.props.pageProps} />);
        const styleTags = sheet.getStyleElement();
        return (
            <>
                {styleTags}
                {page}
            </>
        );
    }
}

静态站点生成（SSG）与 styled - components 结合
- 思路：Next.js 的 SSG 会在构建时生成 HTML 页面。结合 styled - components，在构建过程中生成样式并嵌入到 HTML 中，使得页面加载时样式已经存在。
- 关键代码示例：

// pages/index.js
import React from'react';
import { getStaticProps } from 'next';
import { ServerStyleSheet } from'styled - components';
import styled from'styled - components';

const Container = styled.div`
    background - color: lightblue;
    padding: 20px;
`;

export async function getStaticProps() {
    const sheet = new ServerStyleSheet();
    try {
        const page = sheet.collectStyles(<Container>Static Site Generated Page</Container>);
        const styleTags = sheet.getStyleElement();
        return {
            props: {
                styleTags
            },
            revalidate: 60 // 可选，设置重新验证时间
        };
    } finally {
        sheet.seal();
    }
}

export default function Home({ styleTags }) {
    return (
        <>
            {styleTags}
            <Container>
                This is a statically generated page.
            </Container>
        </>
    );
}

优化样式复杂度
- 思路：简化嵌套样式，避免不必要的媒体查询。尽量将通用样式提取到全局样式中，减少重复计算。
- 关键代码示例：

// 提取通用样式
const baseButton = styled.button`
    background - color: blue;
    color: white;
    padding: 10px 20px;
    border: none;
    border - radius: 5px;
`;

const primaryButton = styled(baseButton)`
    background - color: green;
`;

const secondaryButton = styled(baseButton)`
    background - color: orange;
`;

代码拆分与懒加载
- 思路：对于大型项目，可以将样式文件进行代码拆分，只在需要时加载相关样式。styled - components 支持动态导入样式组件。
- 关键代码示例：

// 使用动态导入
const loadComponentWithStyles = async () => {
    const { default: ComponentWithStyles } = await import('./ComponentWithStyles');
    return ComponentWithStyles;
};

const MyPage = () => {
    const [ComponentToRender, setComponentToRender] = React.useState(null);
    React.useEffect(() => {
        loadComponentWithStyles().then((Component) => setComponentToRender(Component));
    }, []);
    return (
        <div>
            {ComponentToRender && <ComponentToRender />}
        </div>
    );
};

星途面试题库

面试题：Next.js 与 styled - components 的性能优化

知识考点

面试题答案

可能导致性能问题的原因

优化思路