No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    PurgeCSS

    Framework
    7
    11
    450
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • kosirm
      kosirm last edited by

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

      1 Reply Last reply Reply Quote 0
      • S
        Sergio C. last edited by

        This post is deleted!
        1 Reply Last reply Reply Quote 0
        • S
          Sergio C. last edited by 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]
                : []
            ]
          }
          
          1 Reply Last reply Reply Quote 1
          • H
            hexillion last edited by

            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.

            1 Reply Last reply Reply Quote 0
            • Hawkeye64
              Hawkeye64 last edited by

              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 1 Reply Last reply Reply Quote 0
              • dobbel
                dobbel @Hawkeye64 last edited by 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.

                1 Reply Last reply Reply Quote 0
                • Hawkeye64
                  Hawkeye64 last edited by

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

                  dobbel P 2 Replies Last reply Reply Quote 2
                  • dobbel
                    dobbel @Hawkeye64 last edited by 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?

                    1 Reply Last reply Reply Quote 1
                    • P
                      pazarbasifatih @Hawkeye64 last edited by

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

                      1 Reply Last reply Reply Quote -1
                      • Hawkeye64
                        Hawkeye64 last edited by

                        The webpack terser plugin does the reduction, but after compilation

                        1 Reply Last reply Reply Quote 0
                        • First post
                          Last post