Anthony Fu @ antfu.me

CPU Profiling Nuxt

Dec 31, 2024 · 2min

If you want to debug the bundling performance of your Nuxt app to generate CPU profiles.

Node.js provides a built-in --cpu-prof flag that allows you to generate CPU profiles. However you can’t directly pass it in your nuxi command, you have to use it with node directly.

Instead of running nuxi dev, you can run node with the direct path to the CLI in node_modules:

# nuxi dev
node --cpu-prof ./node_modules/nuxi/bin/nuxi.mjs dev --fork=false

Note that --fork=false is important as by default nuxi will start the Nuxt process in a forked process which will make the CPU profile not working.

The simliar technique can be applied to other CLI tools that are not directly using node to start the process.

After killing your Nuxt process, you will find two CPU.***.cpuprofile files generated in your working directory. I recommend using CPUpro to visualize the profile. If you are using VS Code, I also created an extension for you to directly open the .cpuprofile file in VS Code easily.

> comment on bluesky / mastodon / twitter
>
CC BY-NC-SA 4.0 2021-PRESENT © Anthony Fu