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.
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)
Using npm:
npm i classnames-minifier
Using yarn:
yarn add classnames-minifier
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,
);