Как уменьшить размер style.chunk.css в next.js?

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

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

Раздел возможностей LightHouse

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

Раздел, посвященный инструментам разработчика Chrome

У меня два вопроса: 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,
);

javascript next.js progressive-web-apps next lighthouse
person invalidtoken    schedule 21.02.2020    source источник
comment
Удалось ли вам заставить это работать с модулями CSS? Мои стили не применяются, потому что модуль purgeCss не распознает модули CSS   -  person Rafael Zerbini    schedule 01.06.2020

Ответы (1)


arrow_upward
2
arrow_downward

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

Установка

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

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

  • следующий-css
  • следующий меньше
  • следующая дерзость

Отредактируйте 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

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

person ddon-90    schedule 21.02.2020
comment
Большое спасибо за помощь. purgeCSS работает нормально в режиме разработки, но в производственном режиме стили не применяются. Как мы можем это исправить? - person invalidtoken; 21.02.2020
comment
Я добавил конфиги для продакшена - person ddon-90; 21.02.2020
comment
Я делаю то же самое, но стили все еще не добавляются в производственную сборку. Я использую next-less с флагом cssModules, установленным в значение true. - person invalidtoken; 21.02.2020
comment
При следующем запуске никакие стили не применяются. - person invalidtoken; 21.02.2020
comment
Я добавил свой файл конфигурации в вопрос. - person invalidtoken; 24.02.2020
comment
Я перешел с 79MB на 9.2MB. Красивый - person Antonio Pavicevac-Ortiz; 25.05.2021