Does 'individual component importing' practice of a UI framework makes Vue js app perform better?

user_10652537 0
Viewed 578

In case of using UI frameworks (like Bootstrap-Vue, ElementUI or Vuetify, etc.) in our Vuejs application, it's possible to import entire UI framework components & stylesheets from node_modeules in the App.vue(or in the application entry point), or importing a particular ui component in particular Vue file/Component as needed.

The demonstration of these two approches looks like:

For scenerio 1

in App.vue

import BootstrapVue from 'bootstrap-vue'

For scenerio 2

in any particular .vue file

import {BContainer} from 'bootstrap-vue'

So,In case of the first option, does it make the application slower or less performing as all components from UI framework is loading for each route change? Also, its's loading some components that are not needed.

On the other hand, it's quite inconvenient to import each ui component in every .vue file.

So what is the best practice for small or large scale web applications? Does the practice is same for other JS frameworks/Libraries link React or Angular? Thanks in advance.

single-page-application vuejs2 vue.js
2 Answers

Scenario 1 – register all components globally

  • All components from the library will be available to use everywhere.
  • If you change or update the library and some of the component names have changed, you won't get any errors at build time.

Scenario 2 – pick-and-choose specific components locally

  • Gets annoying to have to import each component when you want to use it.
  • Only components that are actually used (imported) will be included in the bundle (if using webpack or something similar). Results in a smaller bundle size.
  • It is clearer to look at the template and know where each component comes from. If you have lots of globally-defined components then there is no clear link between a component and where it came from.
  • If you change or update the library and some of the component names have changed, you will get build errors due to missing modules.
user_7340400

So,In case of the first option, does it make the application slower or less performing as all components from UI framework is loading for each route change? Also, its's loading some components that are not needed.

It does make a difference when you are importing the entire package globally. Also it won't reload the package for every route change as you have the import inside App.vue. It will be done once when your app is loaded for the first time. enter image description here I found this article very helpful on how to optimize loading 3rd party components into vue app.

On the other hand, it's quite inconvenient to import each ui component in every .vue file.

End of the day it all comes to how much of tradeoff your development team is willing to make between optimizing the app and adding multiple lines of import code into individual components.

user_20792710
Related