Remove unused JS with nuxt

Question

Were using nuxt and the chrome coverage report shows a lot unused JS.

Is there a way to only JS necessary for a certain route?

Answer 1

I can help with 3 easy tips:

1. Make sure you are not loading a lot of plugins because plugins are loaded as global. Only use a plugin if this plugin is needed in all pages.

2. Check if you are importing (static) components in your layout that you are not really using becasuse you have a v-if sentence for example. Try to import components dynamically when you do not need them in your first content loaded.

3. For third party scripts, libs try to check if you can use tree shake and import only the features you need.

There are a lot of improvements you can apply to your website to reduce unused js but you can start checking these.

For CSS you can use Purge CSS (https://purgecss.com/)