Dynamically load vue components and resources into browser

Question

I have a SPA with multiple " custom modules", let´s say 'Module A' and 'Module B'. These modules are very different in nature, and Module A uses several "complex" Vue components and javascript/typescript files (resources) which is irrelevant to Module B, and vice versa.

The user can choose to switch between these modules. I would like to only load the relevant resoures depending on the the user´s choice, so all of the resources in Module A isn´t cluttering up the browsers memory, when Module B is chosen. I am using Webpack for bundling. Is this possible in a SPA?

Maybe an alternate solution could be to use Vue´s 'v-if' or '<componoent:is...'. But even though, isn´t all the logic loaded in the browser anyway, because of the way webpack is bundling?

Answer 1

Just use Async Components

Note that what makes component async is not how it is written (as it may seem from 1st two examples) but how it is imported and used...

new Vue({
  // ...
  components: {
    'ModuleA': () => import('./ModuleA'),
    'ModuleB': () => import('./ModuleB'),
  },
  computed: {
    moduleToUse() {
      return this.someUserPreferrences.activeModule // returns 'ModuleA' or 'ModuleB'
    }
  },
  template: `
   <div><component :is="moduleToUse" /></div>
  `
})

Answer 2

Vue Router Lazy Loading

I would like to only load the relevant resoures depending on the the user´s choice, so all of the resources in Module A isn´t cluttering up the browsers memory, when Module B is chosen.

There is a term called Vue Router Lazy-Loading . The basic concept is that, you can subgroup vue components into separate groups. Say you have two components for Module A (Group A) and two components for Module B(Group B).

const Jan = () => import(/* webpackChunkName: "group-a" */ './Jan.vue')
const Feb = () => import(/* webpackChunkName: "group-a" */ './Feb.vue')
const Mar = () => import(/* webpackChunkName: "group-b" */ './Mar.vue')
const April = () => import(/* webpackChunkName: "group-b" */ './April.vue')

By configuring router lazy loading, the four components are not bundled toghter into xxx-chunk.js , it will be bundled into xxx-a.js and xxx-b.js instead.

When you refer to, eg, Feb.vue , which belong to "group-a" , only xxx-a.js is loaded. In this case, xxx-b.js is not loaded at the same time.

Official Guide

My Build

In one of my code repos, I subgrouped the pages into three groups home_profile , terms and policy . These .vue pages/components are not all nested into chunk-vendors.67613a87.js .

 dist\js\chunk-vendors.67613a87.js    78.33 KiB          27.43 KiB
  dist\js\home_profile.0fcdff92.js     23.93 KiB          6.96 KiB
  dist\js\terms.8d1717e3.js            17.48 KiB          6.58 KiB
  dist\js\policy.4da72a5e.js           13.76 KiB          4.90 KiB

---

Router View

The user can choose to switch between these modules.

Check out Element UI NavBar , import it with :router="true" . You can set all your page .vue to be the children routes under the same parent route.