Classnames-minifier NPM

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 logic of minifying is taken out of the next-classnames-minifier library.

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)

Installation

Using npm:

npm i classnames-minifier

Using yarn:

yarn add classnames-minifier

Configuration

Options

prefix - custom prefix that will be added to each updated class;
reservedNames - array of reserved names that should not be used by this package (must include prefix);
cacheDir - directory where this library will write the cache. Passing this parameter will enable caching. Use this option only if your framework really needs it;
distDir - directory where the project is being assembled. Used only when caching is enabled to synchronize caches between this library and the project;
disableDistDeletion - option that allows you to disable the automatic deletion of the dist folder if necessary (f.e. differences in package setup in cache and now or first launch);

Configuration example:

// webpack.config.js
const classnamesMinifier = new ClassnamesMinifier({
    prefix: '_',
    reservedNames: ['_en', '_de'],
});
// ...
loaders.push(
    {
        loader: require.resolve('css-loader'),
        options: {
            importLoaders: 3,
            modules: {
                mode: 'local',
                getLocalIdent: classnamesMinifier.getLocalIdent,
            },
        },
    },
);

If the framework you are using utilizes component caching between builds, you can configure caching in classnames-minifier as well. As a result, module classes between builds will use the same compressed classes.

// webpack.config.js
const classnamesMinifier = new ClassnamesMinifier({
    distDir: path.join(process.cwd(), 'build'),
    cacheDir: path.join(process.cwd(), 'build/cache'),
});
// ...
loaders.push(
    classnamesMinifier.postLoader,
    {
        loader: require.resolve('css-loader'),
        options: {
            importLoaders: 3,
            modules: {
                mode: 'local',
                getLocalIdent: classnamesMinifier.getLocalIdent,
            },
        },
    },
    classnamesMinifier.preLoader,
);