[FIXED] How to improve VueJS dev performance (RAM-wise)?

Issue

I am currently working on a Vue.js project with a pretty large codebase. It is written on Vue 2. What I have noticed is that when I run it on development mode using vue-cli-service serve, it uses >2GB of RAM. I have tried a few configs trying to improve this , such as:

configureWebpack: {
optimization: {
  removeAvailableModules: false,
  removeEmptyChunks: false,
  splitChunks: false,
  runtimeChunk: true,
},
output: {
  pathinfo: false,
}

but it didn't change anything. It still uses >2GB of RAM. I also have disabled devtools: Vue.config.devtools = false but still, without luck.

I need to find a way to reduce the RAM usage on development mode.

Solution

A lot of things can impact your local dev experience. Listing all of them would take a huge amount of time but you can get a glimpse on what could be optimized here.
That answer is specific to Nuxt but give some generic leads too.

TLDR being that it can depend of your project (importing huge libraries, loading 3rd party scripts, etc...), the tooling around (code editors, linters etc...), your system's specs (SSD, CPU etc...).
It's too broad of a topic to say what exactly is taking you more RAM (and not really worth the effort).

As mentioned in the comments, moving to Vite may help. Get some hardware with 16 GB of RAM, a decent CPU and an SSD and you will be mostly okay if not running crazy unoptimized Docker funky setups.

Answered By - kissu

Answer Checked By - Candace Johnson (PHPFixing Volunteer)