How to reduce the size of style.chunk.css in next.js?

Question

I am working on a Web App that uses next.js (^9.1.1) with @zeit/next-less (^1.0.1). I am trying to improve the performance of this App. I am using LightHouse to measure the performance.

The LightHouse opportunity section is showing this -

The coverage section of chrome dev tools is showing that 97.5% of the CSS in styles.chunk.css file is unused, I think this is because it contains CSS of almost all the pages of my Next App -

I have two questions: 1. What does this styles.chunk.css file do? 2. How can I decrease the size of this file in a way that it only contains styles that are needed for that particular page?

I have tried using next-purgecss, but purgecss is only working in development mode and not working in production mode, my config file written down below -

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

You can use next-purgecss plugin

Installation

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

Note: next-purgecss requires one of the following css next plugins:

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

Edit next.config.js

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

module.exports = withCss(withPurgeCss())

By default, next-purgecss will always remove unused CSS, regardless of build environment.

Edit:

For Production

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

More info here: https://www.npmjs.com/package/next-purgecss

I hope this helps.