Nuxt Performances: Present and Future

[atinux]

On top of letting your write Vue files, creating pages with the filesystem and managing your SEO with vue-meta, the NuxtJS team and contributors worked a lot of shipping by default an efficient and performant web application.

What do we have today:

• Route based chunking
• Auto preload/prefetch links
• Webpack 4: Tree Shaking, Code splitting, Terser, Hahsed file names optimized for long-term caching, Optimistic Chunk Groups, Optional CSS Extraction
• HTTP/2 push headers support
• Server-Timing header
• PWA/Workbox Module — lighthouse 100 score by adding a single module!
• AMP Support
• Modern Mode to serve less-transpiled bundles to modern browsers with nuxt build —-modern
• Smart placeholder to avoid extra loads to Nuxt rendering
• nuxt-start for production (8MB install vs 60MB with nuxt)
• Bundle analyzer with nuxt build —analyze
• Minify HTML
• ETAG
• nuxt-ssr-cache module
• SPA server cache
• HTTP Compression
• Dynamically prefech links/scripts/components is inspired by quicklink
• Guess.js support
• TypeScript Support
• Webfont Loader
• Lazy Hydration

What do we plan to do:

• Webpack 5 support
• Reducing initial bundle size
  • Nuxt starter app could be a simple app.vue file (including only vue and vue-meta)
  • Vue3 Support
  • Select features individually to reduce bundle sizes (experimental)
• Smart SSR Module (stale-while-revalidate cache aka SPR and dynamic SSR/SPA switching)
• Multi target builds (static, server, serverless)
  • Full static support
• Lamba API Support
• CI/CD for continues performance measurements (for PRs to the core)
• Critical CSS extraction
• Image Module (lazy-loading and size-optimize)
• Supporting APP Shell (SSR only for layout)
• In discussion: Rewrite core in typescript

How to accomplish this:

Maintaining an open source project requires consistent effort, not just with adding code, but also code reviews and support. The NuxtJS team and contributors coordinates their efforts on Discord. We all work on our free time to maintain it and I do believe the Chrome Performance Fund could help us to pay ourselves and our contributors on this future work thanks to our Open Collective.

[Niputi]

https://github.com/maoberlehner/vue-lazy-hydration
should maybe also be added to the "What do we have today"

[atinux]

Will update thank you @Niputi

[addyosmani]

We all work on our free time to maintain it and I do believe the Chrome Performance Fund could help us to pay ourselves and our contributors on this future work thanks to our Open Collective.

I'm happy to share Chrome is donating $12,000 to support Web Performance optimizations on the Nuxt.js roadmap 🎉 We think this project's goals align well with helping reduce the initial bundle size of modern web experiences, like those built with Vue.

In particular, we're excited to see the project explore the proposed work on:

• Reducing the baseline bundle costs for the Nuxt starter app
• Image bloat reduction (via lazy-loading and better optimization)
• Work on smarter SSR using SWR (stale-while-revalidate)

We know the work to upgrade to Webpack 5 has been a long one and are looking forward to seeing those changes land too! We hope this funding helps support your work just a little :)

~ signed Addy, @stubbornella and @spanicker

[galvez]

Work on smarter SSR using SWR

The term SWR is new to me. Can you clarify?

[addyosmani]

SWR = stale-while-revalidate :)

[galvez]

@addyosmani ah gotcha, thank you :)

[assoft]

This is great news