Javascript 如何减少next.js中style.chunk.css的大小？

我正在开发一个使用next.js（^9.1.1）和@zeit/next less（^1.0.1）的Web应用程序。我正在努力提高此应用程序的性能。我用灯塔来衡量性能

灯塔机会部分展示了以下内容：

chrome dev tools的coverage部分显示styles.chunk.CSS文件中97.5%的CSS未使用，我认为这是因为它包含了我下一个应用程序中几乎所有页面的CSS-

我有两个问题： 1.这个styles.chunk.css文件做什么？ 2.如何减小此文件的大小，使其仅包含特定页面所需的样式

我已经尝试过使用next purgecss，但purgecss只在开发模式下工作，不在生产模式下工作，我的配置文件写在下面-

module.exports = withPlugins(
  [
    withLess(withPurgeCss({
      purgeCssEnabled: ({ dev, isServer }) => (!dev && !isServer),
      cssModules: true,
      cssLoaderOptions: {
        getLocalIdent: (loaderContext, localIdentName, localName, options) => {
          const fileName = path.basename(loaderContext.resourcePath);
          const shoudTransform = canBeTransformed(loaderContext.resourcePath);

          if (!shoudTransform) {
            return localName;
          }
          const name = fileName.replace(/\.[^/.]+$/, '');
          return `${name}___${localName}`;
        },
      },
    })),
    // withBundleAnalyzer({}),
  ],
  nextConfig,
);

---

您可以使用

nextpurgecss

插件

装置 注意：

next purgecss

需要以下css next插件之一：

• 下一个css
• 其次
• 下一句俏皮话

编辑next.config.js 默认情况下，

下一个purgecss

将始终删除未使用的CSS，无论构建环境如何。

编辑：

用于生产 更多信息请点击此处：

---

我希望这有帮助。

您可以使用

下一个purgecss

插件

装置 注意：

next purgecss

需要以下css next插件之一：

• 下一个css
• 其次
• 下一句俏皮话

编辑next.config.js 默认情况下，

下一个purgecss

将始终删除未使用的CSS，无论构建环境如何。

编辑：

用于生产 更多信息请点击此处：

---

我希望这能有所帮助。

非常感谢您的帮助。purgeCSS在开发模式下运行良好，但在生产模式下，样式不适用。我们如何解决这个问题？我已经添加了产品配置，我也在做同样的事情，但是产品构建中仍然没有添加样式。我正在使用下一个less，cssModules标志设置为true。当我运行“下一个开始”时，不会应用任何样式。我已在问题中添加了配置文件。非常感谢您的帮助。purgeCSS在开发模式下运行良好，但在生产模式下，样式不适用。我们如何解决这个问题？我已经添加了产品配置，我也在做同样的事情，但是产品构建中仍然没有添加样式。我正在使用下一个less，cssModules标志设置为true。当我运行“下一个开始”时，没有应用任何样式。我在问题中添加了我的配置文件。你能在CSS模块中使用它吗？我的样式不适用，因为purgeCss模块无法识别CSS模块。您是否能够使用CSS模块实现此功能？我的样式不适用，因为purgeCss模块无法识别CSS模块

npm install @zeit/next-css next-purgecss --save-dev

// next.config.js
const withCss = require('@zeit/next-css')
const withPurgeCss = require('next-purgecss')

module.exports = withCss(withPurgeCss())

// next.config.js
module.exports = withCss(
  withPurgeCss({
    // Only enable PurgeCSS for client-side production builds
    purgeCssEnabled: ({ dev, isServer }) => (!dev && !isServer) 
  })
)