Static GitHub Issues

[439] Vendors build: when to use?

prev: Multiple dynamic
next: "SyntaxError: Unexpected token <" on external Vue component

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.

<!--cmty--><!--cmty_prevent_hook--><div align="right"><sub><em>This question is available on <a href="https://nuxtjs.cmty.io">Nuxt.js</a> community (<a href="https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c381">#c381</a>)</em></sub></div>