PurgeCSS

rmjersey

Hello,

Has anyone had any success using the excellent PurgeCSS webpack plugin (or via postcss) with Quasar?

Or does quasar remove unused CSS itself (e.g. when you don’t include certain components)?

kosirm

I’m also interested to know this. Any insight welcome…

Sergio C.

This post is deleted!

Sergio C.

Stumbled upon this thread quite late, but you can certainly use PurgeCSS with Quasar. Just tested the following, which reduces the CSS size in bundle for an empty app from ~200kb to 5kb.

In short, install PurgeCSS:

yarn add @fullhuman/postcss-purgecss -D

And configure PurgeCSS to target your source code (in postcss.config.js):

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

  // Specify the paths to all of the template files in your project
  content: [
    './src/**/*.html',
    './src/**/*.vue',
    './src/**/*.jsx',
    // etc.
  ],

  // This is the function used to extract class names from your templates
  defaultExtractor: content => {
    // Capture as liberally as possible, including things like `h-(screen-1.5)`
    const broadMatches = content.match(/[^<>"'`\s]*[^<>"'`\s:]/g) || []

    // Capture classes within other delimiters like .block(class="w-1/2") in Pug
    const innerMatches = content.match(/[^<>"'`\s.()]*[^<>"'`\s.():]/g) || []

    return broadMatches.concat(innerMatches)
  }
})

module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
    ...process.env.NODE_ENV === 'production'
      ? [purgecss]
      : []
  ]
}

hexillion

I too used this, but faced many issues of css getting deleted. so I would ask you to double-check if the css was purged if you face UI issues. I know I was not doing it right but just my experience.

Hawkeye64

This is IMPORTANT to know…There is a problem with purging the Quasar CSS. A lot of the components have a color property, where you can assign it from the Quasar color palette (ex: teal-8). Behind the scenes, Quasar is prefixing with either text- (text-teal-8) or bg- (bg-teal-8) depending on the needs of the component. PurgeCSS cannot detect this, so it will remove the CSS and your colors will be off.

dobbel

@Hawkeye64 that can be but it does not explain the 200kb to 5kb CSS size reduction with PurgeCSS vs default Quasar. Only way to explain is that Quasar does a not so very good job at reducing it’s own css bundle size. Just my thoughts.

Hawkeye64

@dobbel Sure it does. It removed CSS that was in use.

dobbel

@Hawkeye64

But I assume that Purgecss also removed a lot of other css that was not in use, considering is was purging an empty Quasar app.

Or are you telling me that 195 kb in reduced bundle size is only because of color classes? So my conclusion stands Quasar is not very efficient at reducing it’s own css bundle size. Another way to say it is that Quasar does not reduce it’s bundle size at all. If that’s the case is this considered to be an issue at all by the Quasar team?

from the first page of the doc website:

Worried about bloat? You shouldn’t be. If you only want to build a website, >Quasar will only build the code required for a website, with nothing else. >Same goes for the other build modes.

Or am I seeing it wrong?

pazarbasifatih

@hawkeye64 I’ve read quite a lot of instances where Quasar CSS led people to other frameworks… Just so that you know

Hawkeye64

The webpack terser plugin does the reduction, but after compilation

No More Posting New Topics!

PurgeCSS