Nuxt.js: Vendors build: when to use?

[EmmanuelBeziat]

Hi,

I’m having a hard time understanding which plugins should be or not in the build/vendor array of the nuxt config.

The doc says:

if we import axios in another page, it will be included again for the page bundle. We want to include axios only once in our application

So if I understand clearly, every plugin that would be used more than in a single Template should be included in it? But with 3 plugins, I aleady get a warning about filesize when compiling…

I have a strange case here: I want to use PrismJS and an bunch of PrismJS plugins, in two different vue template.

If i set this:

import Prism from 'prismjs'
import 'prismjs/plugins/toolbar/prism-toolbar.js'
import 'prismjs/plugins/show-language/prism-show-language.min.js'
import 'prismjs/components/prism-bash.min.js'
import 'prismjs/components/prism-php.min.js'

// and later:
Prism.highlightAll()

And if I have prism is in my vendor build config, I got an nuxt referrenceError about prism not being defined. If I remove it from the build vendor config, it works fine. But it mean that all those plugins will be merged twice, right?
So if I want to have it in build vendor config, I should remove al the import stuff from the template files. But then, all these "sub-plugins" wouldn’t be used, unless I add them in vendor build too, and reaching almost 3mb for the final vendor.bunle.js

So what should I do? Thanks in advance.

_{This question is available on Nuxt.js community (#c381)}

[Atinux]

Hi @EmmanuelBeziat

When you import X from 'x' in your components, Webpack will include its code in the corresponding bundle. But cecause every page is code-splitted, every page has a JS bundle in Nuxt.js.

Let's say you import Prism from 'prismjs' in most of your pages, the code of prismjs will be included in every JS bundle. That's where build.vendor comes!

If you set in your nuxt.config.js:

module.exports = {
  build: {
    vendor: ['prismjs']
  }
}

You will still need to import Prism from 'prismjs' in your pages, but when webpack will ready this line, it will know that it is in the vendor.bundle.js and won't include prismjs in the page bundle.

Same for the prismjs plugins, you can do something like this in your nuxt.config.js:

module.exports = {
  build: {
    vendor: [
      'prismjs',
      'prismjs/plugins/toolbar/prism-toolbar.js'
      'prismjs/plugins/show-language/prism-show-language.min.js',
      'prismjs/components/prism-bash.min.js',
      'prismjs/components/prism-php.min.js'
    ]
  }
}

Don't forget that build.vendor will not import the library for you but just tell Webpack that its libraries and it should not be included in others JS bundles.

For the bundle size, you can launch nuxt build -a to see a map of your bundle, be careful of the gzipped size (which can be completely different).

[EmmanuelBeziat]

Thanks for the explanations and the tip!

[qm3ster]

Let's hope webpack 4 saves us from this.

[cuong-nguyen]

Sorry to post a question into an already closed issue, but is it normal that I am seeing modules both in vendor and my page bundle e.g. (lodash, date-fns,..)

I only import the helper I need from these libraries

By looking at the bundle analyzer, duplicated modules in vendor look bigger than ones in page bundle.

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.