@nimpl/classnames-minifier

(Former next-classnames-minifier )

Library for configuring style (css/scss/sass) modules to generate compressed classes (.header -> .a, .nav -> .b, ..., .footer -> .aad, etc.) with support for changes and rebuilding without clearing the built application. The package itself synchronizes minified classnames with components of the application compiled earlier.

Installation 

Using npm:

npm i @nimpl/classnames-minifier

Reasons 

Compressing classes can reduce the size of the generated html and css by up to 20%, which will have a positive effect on page rendering and metrics (primarily FCP )

Configuration 

const { default: classnamesMinifier } = require('@nimpl/classnames-minifier');
const { PHASE_PRODUCTION_SERVER, PHASE_DEVELOPMENT_SERVER } = require('next/constants');

const withClassnamesMinifier = classnamesMinifier({
  prefix: '_',
  reservedNames: ['_en', '_de'],
  disabled: process.env.NODE_ENV === 'development',
})

module.exports = withClassnamesMinifier(nextConfig);

The package automatically checks all classes and settings before the next.js application is fully launched. This allows for greater stability. But it takes a little time.

At the same time, at the package level it is impossible to automatically determine whether the assembly is currently running or whether it is launching the entire application. Therefore, it is recommended to disable the package for the application startup phase:

const { default: classnamesMinifier } = require('@nimpl/classnames-minifier');
const { PHASE_PRODUCTION_SERVER, PHASE_DEVELOPMENT_SERVER } = require('next/constants');

module.exports = (phase) => {
  const withClassnamesMinifier = classnamesMinifier({
    disabled: phase === PHASE_DEVELOPMENT_SERVER || phase === PHASE_PRODUCTION_SERVER,
  });

  return withClassnamesMinifier(nextConfig);
};

Options 

• prefix - Prefix which will be added to each generated name;
• reservedNames - Reserved minified names. Use this option if you are adding short classes manually (must include prefix);
• disabled - Disable classnames minifying;
• distDeletionPolicy - Package policy to resolve potential problems with minified classes;
• experimental.syncFreedNames - Automatically synchronize freed classes (for example, if you deleted the original styles) Such classes will be reused in new locations. In this case, there may be situations that the package will mistakenly consider them freed and reuse the class again, thereby creating duplicates.

Be careful using this option;

• experimental.freedNamesLimit - Limit of unused minified classes. Such classes are not reused by default, since the package cannot be sure of this at this time.

Dist Deletion Policy 

Package policy to resolve potential problems with minified classes;

This may happen due to the following reasons:

1. Launching the package for the first time. Package need clean next.js cache to put everything in the correct order
2. Changing the package configuration. Package need clean next.js cache to rebuild it with classes according to the new rules
3. Exceeding the limit on freed classes (these are classes that were used before, but are now probably no longer used)

Options:

"warning" - a warning message will simply be displayed. With this option, there is a high risk of errors and duplicates of generated classes.

"error" [default] - an error will be thrown, and as a result the build will stop. If this option occurs, delete the next.js cache manually and restart the build.

"auto" - the package will automatically delete the next.js cache directory.

Development 

Read about working on the package and making changes on the contribution page 

Additional 

Please consider giving a star if you like it, it shows that the package is useful and helps continue work on this and other packages.

Create issues with wishes, ideas, difficulties, etc. All of them will definitely be considered and thought over.