Diagnosing and Fixing Unexpected Quasar Build Bloat

The Problem: Unexpected Bundle Growth

After adding a new library or upgrading a dependency, Quasar CLI build times may increase significantly, and the generated production bundle may exceed project thresholds (e.g., >200 KB gzipped). This usually indicates that tree-shaking is failing or that heavy assets are being bundled unnecessarily.

Common Causes and Diagnostics

Use this table to match your symptoms to the most likely cause before running deep diagnostics.

Cause	Symptom	Technical Reason
Whole-library imports	Large lodash chunk (~1.2 MB)	Importing the entire library prevents tree-shaking of unused functions.
Icon font bundles	Extra font.css and font files (~300 KB)	Loading entire font sets instead of specific SVG icons.
Moment.js locales	Inflated moment chunk (~200 KB)	Moment.js bundles all available locales by default.
Production source maps	Large .map files in /dist	sourceMaps flag is enabled for production builds.
Webpack chain overrides	Missing minification or console logs in prod	Custom extendWebpack rules overriding default optimizations.

Ordered Verification Steps

1. Analyze the Bundle: Run the analyzer to visualize exactly which modules are taking up space.

   # Run in project root
   quasar build --analyze

   Check: Look for oversized rectangles in the resulting treemap report.
2. Verify Source Map Settings: Check quasar.conf.js to ensure source maps are disabled for production.

   // quasar.conf.js
   build: {
     sourceMaps: false
   }

3. Check Lodash Import Patterns: Search the codebase for import _ from 'lodash'. If found, the library is not being tree-shaken.
4. Audit Webpack Extensions: Review the extendWebpack function in quasar.conf.js for any plugins that might be disabling the default Terser/UglifyJS minification.

Targeted Fixes

1. Optimize Lodash Imports

Replace general imports with lodash-es (the ES module version) to allow the compiler to remove unused code.

// Change this:
import _ from 'lodash';

// To this:
import { cloneDeep, debounce } from 'lodash-es';

2. Strip Moment.js Locales

Use the IgnorePlugin within quasar.conf.js to prevent Webpack from bundling every language file.

// quasar.conf.js
const webpack = require('webpack')

build: {
  extendWebpack(cfg) {
    cfg.plugins.push(
      new webpack.IgnorePlugin({
        resourceRegExp: /^\.\/locale$/,
        contextRegExp: /moment$/
      })
    )
  }
}

3. Remove Production Console Logs

To further shrink the bundle and improve security, configure the minimizer to drop console statements.

// quasar.conf.js
build: {
  extendWebpack(cfg) {
    const terser = cfg.optimization.minimizer[0]
    if (terser) {
      terser.options.terserOptions.compress.drop_console = true
    }
  }
}

4. Shift to SVG Icons

Instead of bundling heavy font files, use Quasar's SVG-based icon sets. Ensure framework.iconSet is set to a supported SVG set and remove external font-based CSS imports from your app.scss or index.html.

Verification and Rollback

Verification: Run quasar build --analyze again. The gzipped bundle should now be under 200 KB (or your specific project limit), and the lodash or moment chunks should be significantly smaller.

Rollback: Since these changes occur in quasar.conf.js and import statements, rollback involves reverting the git commit containing the configuration changes and returning to the original import syntax.

Limitations and Cautions

• Mode Compatibility: Changes to extendWebpack can behave differently across SSR, PWA, and Cordova modes. Always test the production build for each target mode.
• Runtime Locales: Ignoring Moment.js locales will break applications that dynamically switch languages at runtime. If you need specific locales, you must import them explicitly.
• Debugging: Disabling sourceMaps makes production stack traces difficult to read. Only disable them for final production releases.

Escalation Criteria

If the gzipped bundle remains >200 KB or you encounter "Module not found" errors after applying these fixes, open a GitHub issue with the label build-performance. Provide the following:

• The HTML report generated by --analyze.
• The build section of your quasar.conf.js.
• The specific version of Quasar and Vue being used.