I am currently experimenting with conditionally loading modules that are Vue components. Review the code snippet below for a better understanding:
index.js
My goal is to dynamically load different components based on the window URL (since I cannot use vue-router as routes are managed by Django).
import Vue from 'vue'
const pathName = window.location.pathname
let components = []
if(pathName === '/page1/') {
components = require('./entry-point/page1.entry.js')
}
else if(pathName === '/page2/') {
components = require('./entry-point/page2.entry.js')
}
components.forEach(({ name, component }) => {
Vue.component(name, component)
})
page1.entry.js
const ComponentA = require('../component-a.vue').default
const ComponentB = require('../component-b.vue').default
module.exports = [
{ name: 'component-a', component: ComponentA },
{ name: 'component-b', component: ComponentB }
]
page2.entry.js
const ComponentC = require('../component-c.vue').default
module.exports = [
{ name: 'component-c', component: ComponentC }
]
In essence, my aim is to split and load only the necessary modules whenever index.js is executed. This application does not follow the traditional server-side rendering approach, which causes issues when using dynamic imports with import().
The current implementation seems to be functioning correctly, but one question remains: Does it truly perform code-splitting or does Webpack load all modules at once, including ./entry-point/page1.entry.js and ./entry-point/page2.entry.js?
Hence, my primary inquiry is whether the conditional module requirement technique mentioned above functions as intended, or if Webpack initially loads all modules regardless?