CODEWITHSUNDEEP
nuxt.js
Thomas M.
Thomas M.

Reputation: 85

NuxtJs 2.0 - How can I avoid bundling libraries that aren't needed on the client side

I'm facing a problem right now in Nuxt, what I'm trying to do is i'm generating a static site from values that I retrieve in my API.

Of course, I need some libraries in order to:

These things should be done during the generation, meaning on the server side. If I do npm run generate, I shouldn't see those libraries bundled inside my script files. Nevertheless I do see them when I run npm build --analyze, so I'm 99% sure they are inside npm run generate also.

I tried different solutions, using those librairies in asyncData, only when process.server, importing and requiring but whatever i'm doing, i'm seeing the library afterwhile in vendors.pages/index.js when I analyze

Do you have any solution on that ? Maybe using payload on generate would avoid it, but I doubt :/ and payload is more for slug pages as far as I understand.. I'm generating my index content with this API content so it's a bit tricky..

Any help would be much appreciated !

Upvotes: 1

Views: 633

Answers (2)

Bob Fanger
Bob Fanger

Reputation: 29907

The externals workaround excludes axios from all clientside scripts, but maybe later a page needs axios.

I suggest using webpack's code splitting: 

if (process.server) {
  const { default: axios } = await import('axios');
  // axios stuff
}

or if you're having trouble with async-await:

import('axios').then(function (axiosModule) {
  const axios = axiosModule.default; 
  // axios stuff
});

That will create a separate bundle for axios that will only be loaded when needed.

Upvotes: 0

Thomas M.
Thomas M.

Reputation: 85

I think I might have a solution, please let me know if this would be the right way or if you have any other suggestion!

OK so for anyone who is struggling with this, one solution, brought on the Nuxt discord, would be to use externals in nuxt.config.js

You should then change nuxt.config.js that way:

build: {
  extend (config, ctx) {
    if (ctx.isClient) {
      config.externals = {
      // removing axios from the bundled library
      axios: 'axios'
    }
  }
}

Doing this is actually removing axios from he bundle on the client side.Not sure if it's the best solution but looks like it works!

Upvotes: 1

Related Questions