A presentation at Vue.js Amsterdam by Debbie O'Brien
NUXT PERFORMANCES By Debbie O’Brien
Debbie O’Brien Head of Learning and Developer Advocate - NuxtJS Teacher @Vue School @debs_obrien
What I will Cover Nuxt webpack PWA
NUXT PERFORMANCES: OUT OF THE BOX Code Splitting Http Compression Automatically split your code into smaller bundles Serves GZIP by default Minified Code ETag Code is minified by default Web cache validation
Code splitting ROUTE BASED CHUNKS SPLIT CHUNKS LINK PRELOADING SMART LINK PREFETCHING DYNAMIC IMPORTS webpack MAGIC COMMENTS BUNDLE ANALYZER
ROUTE BASED CHUNKS All pages have their own chunks @debs_obrien
/PAGES Add a .vue file to the pages directory
Router.js file Your router.js file is created and maintained automatically for you
Router.js file Dynamic Imports for lazy loading of routes
Router.js file webpackChunkName to easier see names of your chunks
Lazy Load Components <MyComponent /> Prefix with “Lazy” <LazyMyComponent />
SPLIT CHUNKS Prevents duplication by separating chunks into shared chunks @debs_obrien
SCRIPT PRELOADING Resource will also be needed during the current navigation @debs_obrien
SMART LINK PREFETCHING Instructs the browser to prefetch in idle time @debs_obrien
SMART LINK PREFETCHING Instructs the browser to prefetch in idle time @debs_obrien
yarn build —analyze Analyze your bundle
NUXT PERFORMANCES: MODULES PWA Nuxt Image Progressive Web App with a single install Make your images more performant Google Font Loader AMP Easily load your Google fonts Google amp with a single install
Zero Config PWA PROGRESSIVE WEB APPS ALLOW YOUR NUXT APP TO BE INSTALLED BY ANYONE, ANYWHERE, ON ANY DEVICE @debs_obrien
Registers a service worker for offline caching @debs_obrien
Automatically generate manifest.json file @debs_obrien
Automatically generates app icons with different sizes @debs_obrien
Lighthouse test passes @debs_obrien
Install your Nuxt PWA on your desktop @debs_obrien
Google Fonts ADD DNS-PREFETCH, PRECONNECT AND PRELOAD @debs_obrien
AMP ACCELERATED MOBILE PAGES @debs_obrien
NUXT IMAGE LAZY LOADING FULL STATIC SUPPORT CDN SUPPORT GENERATE RESPONSIVE SIZES <nuxt-img src=”/nuxt-icon.png” /> <nuxt-picture src=”/nuxt-icon.png” /> @debs_obrien
NUXT IMAGE preset=”jpg-cover” format=”webp” predefined sets of image modifiers Serve images in specific format fit=”cover”, fit=”fill” …… quality=”80” Specifies the size of the images Select the quality you want loading=”lazy” Prevent layout shifting Automatically add lazy loading Sets size of the image based on the aspect ratio
Use with your favourite provider <nuxt-img provider=”cloudinary” src=”/main.png” width=”300” height=”169” :modifiers=”{ roundCorner: ‘0:100’ }” />
NUXT PICTURE <div> <picture> <source srcset=”…”> <img src=”…”> </picture> placeholder format=”webp” / “avif” Small, low quality image for when image is loading Serve modern format webp when browser supports it
Be Performant Be Nuxt @debs_obrien
@debs_obrien
THANK YOU TWITTER debs_obrien LINKEDIN Debbie O’Brien YOUTUBE youtube.com/c/DebbieOBrien
Nuxt is so performant out of the box. We do so much for you so you don’t have to. Take a look at how webpack works and what it does for you and you don’t even have to do anything to get all these features such as lazy loading and code splitting. Also check out Nuxt Image. Yes we now have Nuxt Image to make your images super performant. Nuxt rocks.
Here’s what was said about this presentation on Twitter.
@debs_obrien is such a good presenter all that energy I need some 🔥🔥🔥🔥 https://t.co/Wob7lVp93G
— Gift Egwuenu (@lauragift_) February 27, 2021
was just watching the @vuejsamsterdam
— Asma Ben Nouir (@AsmaNouir) February 27, 2021
talk of @debs_obrien
. This woman is just a love 😍Her energy and motivation 🔥🔥🔥
I love #nuxt more after each talk she make :)
Just had an amazing Q&A with @debs_obrien about Nuxt performance at #vuejsamsterdam
— Marc Backes ⚡️ (@themarcba) February 27, 2021
You should really try Nuxt Image. I know I will 💚😁
Wrapped up @Frontend_Love @vuejsamsterdam with a full-on dance on stage with @debs_obrien @isro_me @josgerards88 💃 💃 Now that was fun :D
— Gift Egwuenu (@lauragift_) February 27, 2021
Thank you all for making this a success. pic.twitter.com/5deeemzy7x
@lauragift_ @debs_obrien @isro_me taking over the dance floor at the #vuejsamsterdam after party.
— Tosin Ibidapo-Obe (@taiwo_xyz) February 27, 2021
🥰🥰🥰 pic.twitter.com/f3UOWNDfto