DEV Community

Cover image for Improve Build Performance of Nuxt
Jakub Andrzejewski
Jakub Andrzejewski

Posted on • Updated on

Improve Build Performance of Nuxt

I recently discovered a great new module for Nuxt created by @pi0 that can greatly (even sometimes 2 times) reduce the build time of your Nuxt app.

At first, I wasn't really positive about it because it uses cache and with cache, you are never sure if it will work the way you want :D

But then, I tried it in one of my projects and I instantly realised how much improvement it is in terms of the build performance.

Keep in mind however that it is a highly experimental project so I would recommend not to use it in a big and production applications as the outcome of it may be different than you expect. The safer option would be to use it on other environments like test/stage first :)

You can check out the module here

Enjoy the article!

πŸ–₯️ Usage

To use the module in your app, the first thing you need to do is to install it in your project by using either nuxi module add like following:

npx nuxi module add nuxt-build-cache
Enter fullscreen mode Exit fullscreen mode

Or by installing it with your package manager of choice:

yarn add nuxt-build-cache
Enter fullscreen mode Exit fullscreen mode

And that's it! When building your project in CI/CD, this module will cache the previous result of building so that if nothing changes it will serve this built project instead of generating a completely new one.

Additionally, you can use following environment variables to modify the behavior of the module:

  • NUXT_DISABLE_BUILD_CACHE - Disable the module entirely
  • NUXT_IGNORE_BUILD_CACHE - Skip restoring cache even if it exists

You can also checkout the module playground for more details here

πŸ€” How does it work in more details?

With this module installed and added to the modules section in nuxt.config.ts file, after building your project, Nuxt will collect build artifacts generated in .nuxt folder into a tar file.

During next builds, if there were no significant changes in the code, Nuxt will skip building Vite/Webpack step and simply use the cached version. This can help to speed up the CI/CD process when only prerendered content (from a CMS for example) or server routes are changed and can significantly speed up build speeds (up to 2x!).

You can read more about the how the module determines if a new build is required here

🚨 Hashes will be generated from the loaded value. If you have a config like { date: new Date() }, the cache will not work!

πŸ“– Learn more

If you would like to learn more about Vue, Nuxt, JavaScript or other useful technologies, checkout VueSchool by clicking this link or by clicking the image below:

Vue School Link

It covers most important concepts while building modern Vue or Nuxt applications that can help you in your daily work or side projects πŸ˜‰

βœ… Summary

Well done! You have just learned how improve the build time of your nuxt app by using the module that will cache the result of previous built to improve the next ones if there were no significant changes.

Take care and see you next time!

And happy coding as always πŸ–₯️

Top comments (4)

youhan profile image
Alireza Jahandideh

Will it save build time on Vercel or Netlify builds?

jacobandrewsky profile image
Jakub Andrzejewski

Not sure about it. @pi0 do you have an answer for that? :)

flimtix profile image

Nice article πŸ‘ I assume you mean in the introduction that it reduces time:

… increase the build time of your Nuxt app.

jacobandrewsky profile image
Jakub Andrzejewski

Haha, yes yes!

I had in mind words like reduce and improve and by mistake when joining them I wrote increase.

Good catch, thanks!