Difference in js file output in Cordova build

[jasonl]

Hi there,
I have a Quasar (CLI version 0.15.14) Cordova app that when I build it’s generating a massive (220MB uncompressed including .map files) js folder. As an experiment I build it as non-Cordova and the js folder is way smaller (2.1MB with no .map files). The number of files in the folder is also way higher in Cordova. Here’s the build commands I’m using.

Cordova
quasar build -m cordova -T android -t mat

Non-Cordova
quasar build -t mat

Here’s my quasar.conf.js

const webpack = require('webpack');

// Configuration for your app

module.exports = function (ctx) {
    return {
        // app plugins (/src/plugins)
        plugins: [
            // 3rd Party
            'axios',
            'vuelidate',
            'vue2GoogleMaps',

            // Ours
            'appOptions',
            'filters'
        ],
        css: [
            'app.styl',
            'overrides.styl',
            'forms.styl',
            'navigation.styl'
        ],
        extras: [
            ctx.theme.mat ? 'roboto-font' : null,
            'material-icons',
            'ionicons'
            // 'mdi',
            // 'fontawesome'
        ],
        supportIE: false,
        vendor: {
            add: [],
            remove: []
        },
        build: {
            scopeHoisting: true,
            vueRouterMode: 'history',
            env: {
                BUILD_MODE: JSON.stringify(process.env.BUILD_MODE)
            },
            analyze: {
                generateStatsFile: true
            },
            // gzip: true,
            // extractCSS: false,
            // useNotifier: false,
            extendWebpack(cfg) {
                cfg.plugins.push(new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/))  // Don't import the locale information for moment or it will bloat the package
            }
        },
        devServer: {
            // https: true,
            // port: 8080,
            open: true // opens browser window automatically
        },
        // framework: 'all' --- includes everything; for dev only!
        framework: {
            components: [
                'QLayout',
                'QLayoutHeader',
                'QLayoutFooter',
                'QPageContainer',
                'QPage',
                'QTabs',
                'QTab',
                'QTabPane',
                'QRouteTab',
                'QCarousel',
                'QCarouselSlide',
                'QCarouselControl',
                'QField',
                'QInput',
                'QToggle',
                'QBtn',
                'QBtnToggle',
                'QModal',
                'QSpinner',
                'QScrollArea',
                'QItem',
                'QItemMain',
                'QItemSide',
                'QItemSeparator',
                'QItemTile',
                'QDialog',
                'QSearch',
                'QInnerLoading',
                'Ripple',
                'Loading',

                'QLayoutDrawer',
                'QToolbar',
                'QToolbarTitle',
                'QIcon',
                'QList',
                'QListHeader',
            ],
            directives: [
                'Ripple'
            ],
            // Quasar plugins
            plugins: [
                'Notify',
                'Dialog',
                'Loading'
            ]
        },
        // animations: 'all' --- includes all animations
        animations: [
        ],
        pwa: {
            cacheExt: 'js,html,css,ttf,eot,otf,woff,woff2,json,svg,gif,jpg,jpeg,png,wav,ogg,webm,flac,aac,mp4,mp3',
            manifest: {
                // name: 'Quasar App',
                // short_name: 'Quasar-PWA',
                // description: 'Best PWA App in town!',
                display: 'standalone',
                orientation: 'portrait',
                background_color: '#ffffff',
                theme_color: '#027be3',
                icons: [
                    {
                        'src': 'statics/icons/icon-128x128.png',
                        'sizes': '128x128',
                        'type': 'image/png'
                    },
                    {
                        'src': 'statics/icons/icon-192x192.png',
                        'sizes': '192x192',
                        'type': 'image/png'
                    },
                    {
                        'src': 'statics/icons/icon-256x256.png',
                        'sizes': '256x256',
                        'type': 'image/png'
                    },
                    {
                        'src': 'statics/icons/icon-384x384.png',
                        'sizes': '384x384',
                        'type': 'image/png'
                    },
                    {
                        'src': 'statics/icons/icon-512x512.png',
                        'sizes': '512x512',
                        'type': 'image/png'
                    }
                ]
            }
        },
        cordova: {
            id: 'com.myapp.mobile',
            version: '0.0.5.1'
        },
        electron: {
            extendWebpack(cfg) {
                // do something with cfg
            },
            packager: {
                // OS X / Mac App Store
                // appBundleId: '',
                // appCategoryType: '',
                // osxSign: '',
                // protocol: 'myapp://path',

                // Window only
                // win32metadata: { ... }
            }
        },

        // leave this here for Quasar CLI
        starterKit: '1.0.2'
    }
}

I’m probably misunderstanding something. Any thoughts? I’m trying to determine why my Cordova builds are so big.

Jason

[rstoenescu]

You’re probably using Crosswalk (which is recommended for targeting Android < 5), but for Android >= 5, you don’t need it. Crosswalk also packs up the browser being used, but it’s no longer necessary.

[jasonl]

I am using Crosswalk and I’m aware of the size it adds but I’m wondering about the size of the Javascript bundles produced by Webpack in the Cordova build. The bundles are way larger in the Cordova build than the non-Cordova one. I just tried a build without Crosswalk and it didn’t change javascript size at all.

[jasonl]

Updating Quasar to 0.17.6 solved the issue.