title: How to reduce the size of style.chunk.css in next.js?
body: <p>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. </p>
  
  <p>The LightHouse opportunity section is showing this - </p>
  
  <p><a href="https://i.stack.imgur.com/5b8vM.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5b8vM.png" alt="LightHouse opportunity Section"></a></p>
  
  <p>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 - </p>
  
  <p><a href="https://i.stack.imgur.com/y6Lpe.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/y6Lpe.png" alt="Coverage section of chrome dev tools"></a></p>
  
  <p>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?</p>
  
  <p>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 - </p>
  
  <pre><code>
  module.exports = withPlugins(
    [
      withLess(withPurgeCss({
        purgeCssEnabled: ({ dev, isServer }) =&gt; (!dev &amp;&amp; !isServer),
        cssModules: true,
        cssLoaderOptions: {
          getLocalIdent: (loaderContext, localIdentName, localName, options) =&gt; {
            const fileName = path.basename(loaderContext.resourcePath);
            const shoudTransform = canBeTransformed(loaderContext.resourcePath);
  
            if (!shoudTransform) {
              return localName;
            }
            const name = fileName.replace(/\.[^/.]+$/, '');
            return `${name}___${localName}`;
          },
        },
      })),
      // withBundleAnalyzer({}),
    ],
    nextConfig,
  );
  
  </code></pre>