面试题：Next.js中CSS模块化在性能优化与SSR场景下的深度应用

技术原理

CSS代码拆分：
- 在Next.js中，CSS模块化将每个组件的CSS封装在该组件内部，避免全局样式污染。拆分CSS代码能让浏览器并行加载不同部分的CSS，提高加载效率。比如对于大型页面，将首屏渲染所需的CSS和后续异步加载部分的CSS分开，首屏CSS优先加载，确保用户能快速看到页面基本样式。
- Next.js默认使用CSS Modules，它会将CSS文件编译为唯一标识符的类名，使得样式作用域仅限于对应的组件。通过这种方式，CSS代码按组件拆分，每个组件只加载自身相关的CSS。
加载顺序优化：
- 在SSR场景下，服务器生成HTML时会包含内联的关键CSS（Critical CSS），这些CSS是页面首次渲染所需的最小样式集。关键CSS能确保页面在加载时尽快呈现出可用的样式，减少用户等待时间。
- 对于非关键CSS，通常会在页面加载完成后异步加载。这样可以避免阻塞页面的主要渲染过程，提高页面加载速度。例如，一些用于交互状态（如悬停、聚焦等）的样式或者在首屏之后才会用到的样式，可以异步加载。
SSR和CSR切换时样式一致性：
- 在SSR阶段，服务器渲染的HTML已经包含了关键CSS。当客户端接管渲染（CSR）时，需要确保客户端加载的CSS与服务器渲染时的CSS一致。Next.js通过在客户端重新应用CSS Modules的方式来保证一致性。由于CSS Modules生成的类名是基于组件和文件结构的确定性哈希，所以在SSR和CSR中生成的类名是相同的，从而保证了样式的一致性。

实现步骤

配置CSS代码拆分：
- 使用PostCSS插件：可以使用像postcss-split-media-queries这样的插件来拆分CSS。例如，在postcss.config.js中配置：

module.exports = {
  plugins: [
    require('postcss-split-media-queries')()
  ]
};

手动拆分CSS：对于组件的CSS，将首屏相关样式和其他样式分开。比如，创建index.module.css用于首屏样式，other.module.css用于其他非首屏样式。在组件中按需引入：

import React from'react';
import styles from './index.module.css';
import otherStyles from './other.module.css';

const MyComponent = () => {
  return (
    <div className={styles.container}>
      {/* 组件内容 */}
      <div className={otherStyles.specialDiv}>特殊内容</div>
    </div>
  );
};

export default MyComponent;

优化加载顺序：
- 生成关键CSS：可以使用工具如critical - css来生成关键CSS。首先安装critical - css：npm install critical - css - - save - dev。然后在构建脚本中集成：

const Critical = require('critical - css');

Critical.generate({
  base: './public',
  src: 'index.html',
  dest: './public/critical.css',
  inline: true,
  width: 1200,
  height: 800
});

异步加载非关键CSS：在Next.js中，可以使用next/link组件的prefetch属性来异步加载CSS。例如，对于非关键CSS文件styles.css，可以这样引入：

import Link from 'next/link';

const MyPage = () => {
  return (
    <>
      <Link href="/styles.css" rel="stylesheet" prefetch />
      {/* 页面内容 */}
    </>
  );
};

export default MyPage;

确保SSR和CSR样式一致性：
- 确保CSS Modules配置一致：在next.config.js中确保CSS Modules的配置在SSR和CSR环境下相同。默认情况下，Next.js对CSS Modules的处理已经保证了这一点。但如果有自定义的CSS加载器或者配置，需要仔细检查确保在服务器和客户端都能正确生成相同的类名。
- 避免动态样式计算差异：在组件中避免在SSR和CSR环境下因动态样式计算导致的差异。例如，不要依赖仅在客户端可用的浏览器特性来计算样式，确保样式计算逻辑在服务器和客户端都能一致运行。

星途面试题库

面试题：Next.js中CSS模块化在性能优化与SSR场景下的深度应用

知识考点

面试题答案

技术原理

实现步骤