星途面试题库

面试题：Next.js中Tailwind CSS如何进行基础的性能优化

在Next.js项目中使用Tailwind CSS，描述至少两种可以提升性能的基础策略，并简要说明每种策略的原理和实现方式。

22.9万热度

难度

前端开发Next.js

知识考点

AI 面试

面试题答案

基于 PurgeCSS 的按需裁剪
- 原理：PurgeCSS 会分析项目中的 HTML、JavaScript 等文件，找出所有用到的 Tailwind CSS 类名，然后只保留这些类名对应的 CSS 样式，去除未使用的样式，从而大大减小 CSS 文件体积，提升性能。
- 实现方式：在 Next.js 项目中，首先安装 @fullhuman/postcss-purgecss 库。然后在项目的 postcss.config.js 文件中配置 PurgeCSS。例如：

const purgecss = require('@fullhuman/postcss-purgecss')({
  content: ['./pages/**/*.{js,jsx,ts,tsx}', './components/**/*.{js,jsx,ts,tsx}'],
  defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || []
})
module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
    ...process.env.NODE_ENV === 'production' ? [purgecss] : []
  ]
}

优化加载顺序
- 原理：尽早加载关键的 CSS 样式，使页面能尽快呈现出样式，提升用户感知的加载速度。将 Tailwind CSS 的基础样式放在文档头部加载，优先渲染关键内容。
- 实现方式：在 Next.js 的 _app.js 文件中，通过 next/head 组件引入 Tailwind CSS。例如：

import Head from 'next/head'
import '../styles/tailwind.css'
function MyApp({ Component, pageProps }) {
  return (
    <>
      <Head>
        <link rel="stylesheet" href="../styles/tailwind.css" />
      </Head>
      <Component {...pageProps} />
    </>
  )
}
export default MyApp

使用 JIT 模式（即时编译）
- 原理：即时编译（Just - In - Time，JIT）模式下，Tailwind CSS 仅在需要时编译样式，而不是提前编译所有可能的样式。这意味着生成的 CSS 体积更小，编译速度更快，尤其是在开发过程中。
- 实现方式：在 tailwind.config.js 文件中，设置 mode: 'jit'。例如：

module.exports = {
  mode: 'jit',
  purge: {
    content: [
      './pages/**/*.{js,ts,jsx,tsx}',
      './components/**/*.{js,ts,jsx,tsx}'
    ]
  },
  theme: {
    extend: {}
  },
  variants: {
    extend: {}
  },
  plugins: []
}