面试题：Next.js 中如何通过代码实现 CSS 的按需加载以提升首屏速度

Question

在 Next.js 项目里，描述一下实现 CSS 按需加载来提升首屏速度的具体代码步骤和涉及的关键概念。例如，如何配置 CSS 模块，以及怎样结合 Next.js 的特定功能来完成这一优化。

Answer 1

1. 关键概念

• CSS 按需加载：只在需要时加载 CSS，避免一次性加载大量不必要的 CSS，从而提升首屏加载速度。
• CSS 模块：将 CSS 封装成模块，避免全局样式冲突，并且能更好地实现按需加载。
• Next.js 特定功能：Next.js 提供了一些内置功能来优化 CSS 加载，如自动代码分割等。

2. 具体代码步骤

配置 CSS 模块

1. 安装依赖：如果项目还未使用 CSS 模块，需要安装 @zeit/next-css （Next.js v9.5 之前）或 Next.js 10+ 内置对 CSS 支持无需额外安装此插件。例如，使用 npm：

npm install @zeit/next-css

2. 创建 next.config.js 文件：在项目根目录下创建 next.config.js 文件（如果不存在）。
3. 配置 CSS 加载：对于 @zeit/next-css 插件（旧版本），配置如下：

const withCSS = require('@zeit/next-css');
module.exports = withCSS({});

在 Next.js 10+ 版本中，可直接在 next.config.js 中配置：

module.exports = {
  // 可配置其他相关属性
};

4. 使用 CSS 模块：在组件中引入 CSS 文件，例如，假设我们有一个 Button.module.css 文件：

/* Button.module.css */
.button {
  background-color: blue;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
}

在 React 组件中引入：

import styles from './Button.module.css';

const Button = () => {
  return <button className={styles.button}>Click me</button>;
};

export default Button;

结合 Next.js 特定功能优化

1. 自动代码分割：Next.js 会自动进行代码分割，对于 CSS 同样适用。当组件被加载时，其关联的 CSS 模块也会被按需加载。例如，如果你有多个页面组件，每个页面组件的 CSS 只会在该页面被访问时加载。
2. 动态导入：对于一些非关键 CSS，可以使用动态导入的方式。例如，假设你有一个 SpecialComponent 组件及其对应的 SpecialComponent.module.css，可以这样动态导入：

const SpecialComponent = dynamic(() => import('./SpecialComponent'), {
  ssr: false,
  loading: () => <div>Loading...</div>
});

这里通过设置 ssr: false 确保只在客户端加载，并且设置了加载时的占位 UI。同时，其关联的 CSS 也会按需加载。