Dynamic Imports & Vite

[mattbloomfield]

Hi all, I know you call out in the docs that Vite does not support Dynamic Imports due to limitations with rollup... but I was curious if anything has changed over the past few years or if anyone has found a workaround?

[13twelve]

@mattbloomfield I looked into this again a couple of months ago using vite-plugin/vite-plugin-dynamic-import and initially thought I'd found a way of doing it, only to find that it only works in development builds but not production builds.

It is something we're very keen to get working. I'll leave this issue open and update when we find a way.

[13twelve]

Vite 6 released in late November - we'll be looking at dynamic imports with Vite 6 shortly

[mattbloomfield]

Sweet!

[mrdoinel]

Another way to handle this issue is to lazyload only the big libraries from your behaviors.
So all behaviors are bundled into the production build but third party packages are loaded only if necessary. For example if you have a behavior for a carousel that is only on a certain page you could load Swiper or any other library only if the carousel is present.

This way of importing (with no variables in the names) is working fine with Vite

const Carousel = createBehavior(
    'Carousel',
    {
        async initCarousel() {
            if (this.swiper) return

            // import swiper and modules only when initializing the carousel
            const { Swiper } = await import('swiper')
            const { A11y, Autoplay, EffectFade, Navigation, Pagination } =
                await import('swiper/modules')

            // init swiper
            this.swiper = new Swiper(this.$node, this.opts)
        }
    },
    {
        init() {
            this.swiper = null
            // options
            this.opts = {
                navigation: {
                    nextEl: '.swiper-next-btn',
                    prevEl: '.swiper-prev-btn'
                }
            }
        },
        enabled() {
            void this.initCarousel()
        },
        disabled() {
            this.swiper?.destroy()
            this.swiper = null
        }
    }
)