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

[shadow81627]

https://github.com/bazzite/nuxt-optimized-images
Automatically optimizes images used in Nuxt.js projects

Does this cover size-optimize for the Image Module?

[atinux]

Actually, the nuxt-optimized-images handles the resize but it’s handled in Webpack directly, we also want to provide a system where your images are external or in the static directory :)

[axetroy]

Can you consider reducing the size of nuxt in the production environment?

I found that when using Docker to package images, even in a production environment, the size is 400 ~ 500M, which is a waste of resources

Is it possible to consider compiling into a single Javascript file so that the user can further reduce the size by some tool. eg. webpack/ncc

So users can run the application by running the following command

> nuxt build
> cd ./dist
> ls -lh
total 44040192
-rw-r--r--    1 root  staff   44040192B 12 29 13:45 index.js
> node ./index.js
Listen on port 3000

I hope the final production environment file is ideal in the size of 400-500M 20-50 M

[danielroe]

@axetroy Have you tried using nuxt-start?

[axetroy]

@danielroe
It has nothing to do with the situation I describe

[danielroe]

@axetroy I've spent some time slimming Nuxt Docker images, and nuxt-start is a key ingredient.

If you are starting Nuxt programmatically, you could try listing just @nuxt/core in your dependencies and adding any additional ones as needed, such as vue-meta, etc. You might also find you don't need to include buildModules in your prod build, and I highly recommend configuring yarn autoclean.

The issue you highlight is, I think, not an issue with Nuxt per se but in the nature of node_modules-based projects. ncc is a good solution. With now-builder, for example, it's routine to create 10-20Mb Nuxt lambdas. I am following this PR with interest as the serverless target has the potential to deliver the kind of build you're probably looking for.

[dsonet]

Can you consider reducing the size of nuxt in the production environment?

I found that when using Docker to package images, even in a production environment, the size is 400 ~ 500M, which is a waste of resources

Is it possible to consider compiling into a single Javascript file so that the user can further reduce the size by some tool. eg. webpack/ncc

So users can run the application by running the following command

> nuxt build
> cd ./dist
> ls -lh
total 44040192
-rw-r--r--    1 root  staff   44040192B 12 29 13:45 index.js
> node ./index.js
Listen on port 3000

I hope the final production environment file is ideal in the size of 400-500M 20-50 M

Sounds like Yarn v2 does what you wanted.

[irving-caamal]

I LOVE NUXTJS!

[mirkosaugo]

hi @atinux, i want to suggest also this optimization for the future: https://develoger.com/how-to-obfuscate-css-class-names-with-react-and-webpack-20e2b5c49cda

[atinux]

@happynautpro you are talking about incremental static generation?
This could be done with a module setting caching headers for pages directly, Pooya has been working on a module for that: https://github.com/pi0/nuxt-swr-cache

[happynautpro]

@atinux yes I’m talking about incremental static generation but I guess the module doesn’t solve the problem. I’m looking for a solution to generate only routes which are changed or a new instead of deploying a whole static site from zero, each time there is only a content change.

Use case would be: Imagine of a site with 1M pages and static hosting (no SSR runtime). In the current scenario, you have to deploy all 1M pages again, if there is only one mirror content change (I’m not talking about code changes). Wouldn’t it be smarter to deploy only the route again, where the content has changed?

[HelloAlexPan]

@happynautpro @atinux

I totally agree that incremental static generation should be a feature should be on the roadmap for the nuxt team going on in the future, but providing a generic incremental build feature may be hard for the Nuxt team to implement themselves as Nuxt currently cannot know the relationships between each piece of data and the pages at build time.

Gatsby solves this problem by forcing the user to fetch data via GraphQL, with GraphQL then defining a query that describes the data needed letting Gatsby know what pages need to be rebuilt whenever specific data is changed.

With that being said, talk about this feature might be better discussed in the GraphQL module for Nuxt, as this is a feature that kind of lies inbetween nuxt core and the nuxt GraphQL module which puts the core team in a weird spot if they were to develop this.

Maybe the solution is a module that interfaces with Nuxt's community Apollo Module? I really do not know, but then we'd be looking at modules for modules which i'm not even sure would be possible (or preferable)

[shadow81627]

Could the @nuxt/content module use something like the build cache but for filtering the files that need to be generated? If only one file in the /content folder has change only the html files that use it get regenerated?

[patrickcate]

Image Module (lazy-loading and size-optimize)

Any update of this feature?

[shadow81627]

@patrickcate There is a work in progress nuxt image module

[saturnonearth]

I agree, Snowpack and full Hybrid SSR Static and SWR Support would be support amazing! Right now rebuilding for static on changes takes ages.

[atinux]

Hybrid SSR and SWR will be supported for Nuxt 3 by default, and back-ported to Nuxt 2 as a module. We are actually testing it before initial release.

[dzcpy]

@atinux Sounds pretty cool! Is there any rough estimation about when it will be released?

[atinux]

Q1 2021

[asmeeee]

Q1 2021

@atinux Hey! Would you suggest to start an app with Nuxt v2 or wait for Nuxt v3?

[atinux]

You can start with Nuxt 2, the migration will be easy for Nuxt 3

[Mdev303]

@atinux Hi , is the roadmap available ? apparently nuxt 3 is in beta but we don't know when the stable will be released

[dzcpy]

@maazdev Actually where can I get the beta version?

[brolnickij]

@dzcpy https://www.npmjs.com/package/nuxt3

[drewbaker]

Would love nuxtGenerateInit or some sort of "only runs at start of generate once" style hook. I'd use it to populate the store with global data (like site title, analytics codes, open graph site data). Currently I have to fetch that stuff on every page, when it never changes. I could remove 1 fetch request per route this way.

[shadow81627]

Would love nuxtGenerateInit or some sort of "only runs at start of generate once" style hook. I'd use it to populate the store with global data (like site title, analytics codes, open graph site data). Currently I have to fetch that stuff on every page, when it never changes. I could remove 1 fetch request per route this way.

Can you use a plugin to run code once on app start up?

[drewbaker]

@shadow81627 how would you do that and only have it run at the start of generate, not on every route?

[Mdev303]

@atinux Hi do you have a roadmap or date for nuxt 3 ? I saw your slides but there was no roadmap either here or on twitter I'm wondering if there is an issue?

[kissu]

@atinux Hi do you have a roadmap or date for nuxt 3 ? I saw your slides but there was no roadmap either here or on twitter I'm wondering if there is an issue?

It's should be available in Q2. Wait a bit til the end of the month. It may be publicly released. 👌🏻

Asking here will not help the team polish it properly. 🤗 If there is no exact date, it's probably because stuff happens and that it's sometimes difficult to judge the required amount of time to finish something.

[Mdev303]

@kissu thanks for your answer I'll wait then.

[liho00]

@atinux Hi do you have a roadmap or date for nuxt 3 ? I saw your slides but there was no roadmap either here or on twitter I'm wondering if there is an issue?

It's should be available in Q2. Wait a bit til the end of the month. It may be publicly released. 👌🏻

Asking here will not help the team polish it properly. 🤗 If there is no exact date, it's probably because stuff happens and that it's sometimes difficult to judge the required amount of time to finish something.

nuxt 3 super slow, very much disappointed, waited since 2019...

[shadow81627]

@atinux Hi do you have a roadmap or date for nuxt 3 ? I saw your slides but there was no roadmap either here or on twitter I'm wondering if there is an issue?

It's should be available in Q2. Wait a bit til the end of the month. It may be publicly released. 👌🏻
Asking here will not help the team polish it properly. 🤗 If there is no exact date, it's probably because stuff happens and that it's sometimes difficult to judge the required amount of time to finish something.

nuxt 3 super slow, very much disappointed, waited since 2019...

There is a public npm nuxt 3 package https://www.npmjs.com/package/nuxt3

[gangsthub]

Does anybody remember the issue where @pi0 gave insights on how to load plugins (I think it was plugins) in a non-blocking way? There were several examples with dynamic imports as well if I recall correctly. But I cannot find it. And it's not documented (yet).

Sorry to add a request like this in this issue, but I think it could be helpful to have it linked here too. 🙏🏽

cc/ @atinux @kissu

[mfrascati]

@gangsthub Here you go: Reduce Blocking time of Nuxt Applications #9061!

[gangsthub]

@mfrascati wow, that was quick! Thank you!

...it was a discussion!! That's why I couldn't find it 😅

[HelloAlexPan]

Posting here to grab community feedback.

We've made a solution for incremental builds in Nuxt 2.0 and want to PR the solution.

Would love everyone's feedback on approach before we make the PR! Issue here #10148