Как уменьшить размер style.chunk. css в следующем. js?

Question

Я работаю над веб-приложением, которое использует next. js (^ 9.1.1) с @ zeit / next-less (^ 1.0.1). Я пытаюсь улучшить производительность этого приложения. Я использую LightHouse для измерения производительности.

Раздел возможностей LightHouse показывает это -

В разделе покрытия инструментов chrome dev показано, что 97,5% файл CSS в styles.chunk. css не используется, я думаю, это потому, что он содержит CSS почти всех страниц моего следующего приложения -

У меня два вопроса: 1. Что делает этот файл styles.chunk. css? 2. Как я могу уменьшить размер этого файла таким образом, чтобы он содержал только стили, необходимые для этой конкретной страницы?

Я пробовал использовать следующую чистку css, но чистка css - это работает только в режиме разработки и не работает в рабочем режиме, мой конфигурационный файл записан ниже -

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,
);

Answer 1

Вы можете использовать next-purgecss плагин

Установка

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

Примечание: next-purgecss требуется один из следующих css следующих плагинов:

• next- css
• next-less
• next-sass

Редактировать next.config. js

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

module.exports = withCss(withPurgeCss())

По умолчанию next-purgecss всегда удаляет неиспользуемые CSS независимо от среды сборки.

Редактировать:

Для производства

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

Больше информации здесь: https://www.npmjs.com/package/next-purgecss

Надеюсь, это поможет.