V-calendar: Webpack code splitting not working as intended

[georgeboot]

I'm using this awesome library in a Vue Cli 3 project. Because we like to keep the bundle size of our entry point as tiny as possible, we code split our different views.

The documentation of this plugin suggest globally registering the plugin, but this would add the plugin to my entry point code, something I don't really need since the plugin is only being used on a few pages.

I've tried to fix this by doing the following:

// main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import { setupCalendar } from 'v-calendar'

setupCalendar(Vue, {
    firstDayOfWeek: 2,
})

new Vue({
    router,
    store,
    render: h => h(App),
}).$mount('#app')

// router.js

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/views/Home.vue'

Vue.use(Router)

export default new Router({
    routes: [
        {
            path: '/',
            name: 'home',
            component: Home,
        },
        {
            path: '/calendar,
            name: 'calendar,
            component: () => import(/* webpackChunkName: "calendar" */ '@/views/Calendar.vue'),
        },
    ]
})

// Calendar.vue (page component that actually needs the calendar)

<script>
import { DatePicker } from 'v-calendar'

export default {
    components: {
        DatePicker,
    },
}
</script>
<template>
<div>
    <date-picker
        mode="single"
        :available-dates="calendarAvailableDates"
        :from-date="calendarAvailableDates[0]"
        :to-date="calendarAvailableDates[calendarAvailableDates.length - 1]"
        :attributes="calendarAttributes"
        is-inline
        :value="null"
        v-model="selectedCalendarDay"
    />
</div>
</template>

However, after running yarn run build and inspecting the bundle sizes, I found that the entire plugin still gets added to my main entry point, and not to the calendar chunk.

This is strange, since I only imported the setupCalendar method in the main.js file.

What am I doing wrong here? I checked the source code, and the plugin is properly exporting different modules.

Is there a way to omit the setupCalendar call entirely, if you want to use defaults?

Relates to: #314

[georgeboot]

For now, I omitted this by creating a the following module myself:

import Vue from 'vue'
import { DatePicker, setupCalendar } from 'v-calendar'

setupCalendar(Vue, {
    firstDayOfWeek: 2,
})

export default DatePicker

... and referencing that only on the page where I need it.

This allowed me to remove the import statement from my main.js that caused the entire plugin to be loaded in my entrypoint.

[nathanreyes]

Interesting. Everything you did looks right. I setup a small demo project with the same configuration that you provided (thanks for that) and when running the build script I get the following bundles

Devtools shows the calendar bundle not getting loaded until I navigate to the /calendar route. I'll keep investigating...

[nathanreyes]

Ok I see it now.

[georgeboot]

Is there a specific reason the setupCalendar always needs to be called, even if you stick to defaults?

[nathanreyes]

Is there a specific reason the setupCalendar always needs to be called, even if you stick to defaults?

It also setups up a global component used for sharing reactive state (popovers, themes, locales).

[nathanreyes]

@georgeboot No need to call setupCalendar anymore unless custom defaults need to be provided. Further, you can import components individually as noted in the updated documentation.