CODEWITHSUNDEEP
javascriptwebpackvuejs2vue-componentbootstrap-vue
TitanFighter
TitanFighter

Reputation: 5074

Global import vs individual component import + webpack: is there any difference in final (bundled/packed) size?

I found similar topic What are the pros/cons of importing components in main.js (for VueJS)? but I want to dig a bit deeper.

For example, bootsrap-vue allows to import all components together via main.js:

import Vue from 'vue'
import BootstrapVue from 'bootstrap-vue'
Vue.use(BootstrapVue);

or any component individually, like:

import bAlert from 'bootstrap-vue/es/components/alert/alert';
Vue.component('b-alert', bAlert);

Many components of bootstrap-vue I simply do not use, so, here I have 2 questions:

  1. Does webpack add to bundled/packed version of site just really used components (Somehow checks which components are used? Is it necessary to specify any Webpack settings?) or webpack simply adds everything what is globally imported (in main.js)?

  2. Based on the 1st question: Is there any profitability in size of bundled/packed (if to use webpack) site in case of using just individual components?

I have quite a big project with lots of components imported in main.js and I would like to know, should I leave it as is or re-organize everything.

UPDATE

I replaced Vue.use(BoostrapVue) by components which I need (I use quite a lot). With Vue.use(BoostrapVue) after npm run build my dist folder was 4.6MB. Once I started to import each needed component the dist folder size became 4.2MB.

Upvotes: 1

Views: 639

Answers (1)

PlayMa256
PlayMa256

Reputation: 6841

If you import * webpack won't be able to know what things were not used, and what thigs were. It will put everything in the final bundle.

Best practices is to use named imports, so they can be "treeshaked".

Upvotes: 2

Related Questions