Quasar Unused Plugin

This is a Webpack 5 plugin for tree shaking unused Quasar components from generated bundles. If you are using Quasar as a standalone UI library with Webpack, then you will be importing from node_modules/quasar/dist/quasar.esm.prod.js. However, Webpack cannot tree shake unused components from this file because this file contains circular references. We can instead import the source code from quasar/src/index.prod.js and use this plugin to break the dependency chain.

Example Savings (in ./examples dir)

| | Bundle Size | Gzipped Size | |--- |---|---| |Before| 559.07 KB | 171.02 KB | |After | 184.23 KB | 62.75 KB |

Usage

import { QuasarUnusedPlugin } from 'quasar-unused-plugin'

export default {
    plugins: [
        new QuasarUnusedPlugin(),
    ],
}

If you are externalizing node modules, you need to add quasar to the allowlist so that Webpack can process this package.

import nodeExternals from 'webpack-node-externals'

export default {
    externals: [
        nodeExternals({
            allowlist: [
                /^quasar*/,
            ],
        }),
    ],
}