> Production

Production

File size impacts the load time of a website. Since Oxiris CSS is about 2 MB in size, it is important to try to reduce the file size.

Since your website will likely never use all the rules from the framework's distribution file, by removing unused rules, we can optimize the performance of your website.

This process can be automated with CSS transformer - PostCSS, and its plugin - PurgeCSS. To find out more, read about PostCSS and PurgeCSS. Below is the setup I used on Next.js projects.

shell

npm i -D postcss @fullhuman/postcss-purgecss

postcss.config.js

const purgecss = require('@fullhuman/postcss-purgecss')

module.exports = {
    plugins: [
        purgecss({
            content: [
                "./src/app/**/*.{js,jsx,ts,tsx}",
                "./src/components/**/*.{js,jsx,ts,tsx}",
            ],
            defaultExtractor: (content) =>
                content.match(/[\w-/:%/.]+(?<!:)/g) || [],             safelist: ["html", "body"],
        })
    ]
}