Optimising nuxt.config.js for speed

Slice Machine
#1

I setup my project following the nuxt guides in slicemachine.dev
One step involved creating the new nuxt app.

npx create-nuxt-app my-slicemachine-project

The default nuxt.config.js that is produced includes this:

  head: {
    // other head code
    ,script: [{
      "src": "https://cdn.polyfill.io/v2/polyfill.min.js?features=Element.prototype.classList"
    }, {
      "src": "https://cdn.jsdelivr.net/npm/focus-visible@5.0.2/dist/focus-visible.min.js"
    }]
  },

I’ve been running chrome lighthouse performance tests and its telling me these CDN references are
worth looking over.

QUESTIONS

  1. Do I need these lines for prismic to work? I tried deleting them and everything seemed fine, just checking in.
  2. I can at least move focus-visible to my package.json file yeah? Doesn’t need to load via CDN no?
  3. Anyone have guidance on moving the pollyfill that just adds features=Element.prototype.classList out of here?

Appreciate your answers.

#2

classList is a DOM thing, and is reasonably well-supported, depending on how far back you want your browser support to go. You could just remove it if you’re happy your users won’t have browsers that old.

focus-visible is not well-supported at all, since it’s just proposed. However, it is a UI thing and possibly not necessary.

Try removing them, and watch the console on a few different (and older) browsers for weird things happening. If it breaks, you know what to change!

#3

Thansk so much @marcellothearcane.

Noob question:
I should be find to just add focus-visble to my package.json yeah and remove it from here?

#4

Yes, I think that should be fine.

#5

This issue has been closed due to inactivity.