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.
