How to user Ignore plugin in quasarconfig

[chris-bartonjo]

I would like to optimize my bundle size especially when using moment js. How do I use the ignore plugin

[MilosPaunovic]

You can give this a look:
https://quasar.dev/quasar-cli/quasar-conf-js#property-vendor

[yeus]

I would like to optimize my bundle size especially when using moment js. How do I use the ignore plugin

Hi I am working on similar problems. And the vendor remove option mentioned by @MilosPaunovic has not helped me. I have found a solution for my self here.

I basically override quasars splitChunk options in quasar.conf.js. Maybe this will help you as well?

[chris-bartonjo]

Hi I did try , did not see much changes, I am basically trying to improve lighthouse scores and i realize I really do not understand how quasar is exposing webpack, for example how to use the text compression plugin etc. Any pointers on how to use the plugins would really help me out

[yeus]

Can you share more details? Without it, its hard to say what the problem is. My configuration makes sure that every 3rd-party module that's included in the quasar entrypoint (usually thats everything in the boot files, and the main layout, everything that you find on the first page that users get to see on your SPA) is put in the vendors.js chunk. Additionally, quasar, vue, core-js can be found there. If you include moments.js in your entrypoint my solution as well as excluding it from vendors as suggested by @MilosPaunovic will not help you.

I then lazy-import "large" libraries such as moment.js by using webpack dynamic imports with a pre-fetch option in the background.
In order to improve lighthouse score, you definitly need a smaller vendor.js size but a lot of other things play a role as well.

Another thing to consider which a lot of poeple are doing is using a smaller packaged modern alternative to moments.js: For example https://github.com/date-fns/date-fns is probably the most-used alternative.

Depending on your use-case it might also help you setting up server-side rendering. I find this addon here for quasar extremly helpful:

• https://github.com/freddy38510/quasar-app-extension-ssg

This combines the advantages of server-side rendering and SPA. It basically pre-renders your webapp and you can then lazy-hydrate your webpage i the background. This way the page gets much faster load-to-first-content times.

[chris-bartonjo]

Thank you @yeus for the response. I am running light house tests and I am following the recommendations, what I am trying to to is:

1. reduce large bundle sizes over the network on first load
2. reduce unused javascript

My app is a pwa, so can it still work with the ssr.

My first problem is understanding if I can use a webpack plugin as provided and described by webpack in quasar, I understand that we can extend webpack or chain. Below is part of my build option in quasar conf file.

chainWebpack(chain) { const nodePolyfillWebpackPlugin = require('node-polyfill-webpack-plugin') chain.plugin('node-polyfill').use(nodePolyfillWebpackPlugin) },
I would like to still chain while using a new plugin if that is possible what I would to achieve is how to port Ignore plugin to quasar using the chain.

My fundamental issue here is firstly know if the webpack implementations maps directly with quasar and if not how do we implement them on quasar

[yeus]

Yeah, in the case of a PWA you don't really have the SSR option, that's right.

What would also help, if you could post an analysis of your page here (check https://quasar.dev/quasar-cli/quasar-conf-js#property-build for the "analyze" option which you can add to quasar.conf.js) ...

And for the vendor option in quasar.conf.js try to exlude "moments.js" like this:

  vendor: {
    remove: ['moments.js']
  },  

In order for it to work, you need to defer the loading though and import moments.js as a lazy webpack import (https://quasar.dev/quasar-cli/lazy-loading). Otherwise It'll simply get loaded in parallel to the vendor.js bundle and it wouldn't make a difference to before..

In the case of your chainWebpack you can simply add my configuration there after your polyfills as well. This should still work..

[yusufkandemir]

Please give this page a read:
https://momentjs.com/docs/#/-project-status/
Moment Team is recommending using other libraries/solutions, rather than using Moment.

So, if you don't have a really compelling reason, replacing Moment with something else might end up in a cleaner, lighter, and quicker solution than trying to optimize it.

Another recommendation that is not written there would be using Quasar's date utils.

[chris-bartonjo]

I think, I will use the quasar utils since it has all the functions I need. Thanks for the pointer

[chris-bartonjo]

this is the analysis output

[note5]

I have refactored most of my code especially component importation using defineAsyncComponent, below is my package json file

"dependencies": { "@googlemaps/js-api-loader": "^1.13.5", "@quasar/extras": "^1.0.0", "@vuelidate/core": "^2.0.0-alpha.34", "@vuelidate/validators": "^2.0.0-alpha.26", "axios": "^0.21.1", "compression": "^1.7.4", "connect-history-api-fallback": "^1.6.0", "core-js": "^3.6.5", "crypto-js": "^4.1.1", "dotenv": "^16.0.0", "express": "^4.17.3", "express-static-gzip": "^2.1.5", "idle-vue": "^2.0.5", "node-polyfill-webpack-plugin": "^1.1.4", "quasar": "^2.0.0", "serve-static": "^1.14.2", "tiny-emitter": "^2.1.0", "vue": "^3.0.0", "vue-router": "^4.0.0", "vue3-lazyload": "^0.2.5-beta", "vuex": "^4.0.1" },
I am also using the snippet you shared in my quasar.conf

`
chainWebpack(chain) {
const nodePolyfillWebpackPlugin = require('node-polyfill-webpack-plugin')
chain.plugin('node-polyfill').use(nodePolyfillWebpackPlugin)
if(ctx.prod) {
chain.optimization.splitChunks({
...chain.optimization.get('splitChunks'),
minSize: 20000,
cacheGroups: {
vendor_initial: {
test: /[\/]node_modules[\/]/,
priority: 20,
reuseExistingChunk: true,
name: 'vendor',
chunks: 'initial',
},
vendor_whitelist: {
test: /[\/]node_modules\/[\/]/,
priority: 20,
reuseExistingChunk: true,
name: 'vendor',
chunks: 'all',
},
}
})
}

  },


},
vendor: {
  remove: ['node-polyfill-webpack-plugin','express','compression','connect-history-api-fallback','serve-static','vue3-lazyload','serve-static']
},

`

I am on the right track ? also I would like to know the impack of using node-polyfill on performance and bundle size

[MilosPaunovic]

This way of pasting code is completely unreadable.

Please try to, at least, format it better for someone to be able to help you easier.
https://www.markdownguide.org/basic-syntax/

[note5]

I have edited my response with right code formatting

I have refactored most of my code especially component importation using defineAsyncComponent, below is my package json file

"dependencies": {
    "@googlemaps/js-api-loader": "^1.13.5",
    "@quasar/extras": "^1.0.0",
    "@vuelidate/core": "^2.0.0-alpha.34",
    "@vuelidate/validators": "^2.0.0-alpha.26",
    "axios": "^0.21.1",
    "compression": "^1.7.4",
    "connect-history-api-fallback": "^1.6.0",
    "core-js": "^3.6.5",
    "crypto-js": "^4.1.1",
    "dotenv": "^16.0.0",
    "express": "^4.17.3",
    "express-static-gzip": "^2.1.5",
    "idle-vue": "^2.0.5",
    "node-polyfill-webpack-plugin": "^1.1.4",
    "quasar": "^2.0.0",
    "serve-static": "^1.14.2",
    "tiny-emitter": "^2.1.0",
    "vue": "^3.0.0",
    "vue-router": "^4.0.0",
    "vue3-lazyload": "^0.2.5-beta",
    "vuex": "^4.0.1"
  },

I am also using the snippet you shared in my quasar.conf

chainWebpack(chain) {
const nodePolyfillWebpackPlugin = require('node-polyfill-webpack-plugin')
chain.plugin('node-polyfill').use(nodePolyfillWebpackPlugin)
if(ctx.prod) {
chain.optimization.splitChunks({
...chain.optimization.get('splitChunks'),
minSize: 20000,
cacheGroups: {
vendor_initial: {
test: /[[\/](https://github.com/quasarframework/quasar/discussions/vue%7Cquasar%7Caxios%7Ccore-js)]node_modules[\/]/,
priority: 20,
reuseExistingChunk: true,
name: 'vendor',
chunks: 'initial',
},
vendor_whitelist: {
test: /[\/]node_modules\/[\/]/,
priority: 20,
reuseExistingChunk: true,
name: 'vendor',
chunks: 'all',
},
}
})
}

  },

},
vendor: {
  remove: ['node-polyfill-webpack-plugin','express','compression','connect-history-api-fallback','serve-static','vue3-lazyload','serve-static']
},

I am on the right track ? also I would like to know the impack of using node-polyfill on performance and bundle size

[note5]

I am using express to serve the app on Heroku as guided by quasar that is why I have express and some server side modules, I am not sure if it is also being added to the build

[metalsadman]

https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet#code-and-syntax-highlighting