TLDR

How do you properly lazy load Vue components within a Laravel application, using Vue routing in addition to Laravel's own web routes?

Full story:

I have a Laravel application that is using Vue. Now that the application has grown considerably in size, I would like to lazy load the Vue components.

To do this, I have set up these files:

• app.js
• router.js
• Test.vue
• app.blade.php
• home.blade.php
• news.blade.php

If I import like: import Test from './components/Test';, then everything works fine, but the component isn't lazy loaded.

If I import like

const Test = resolve => {
    require.ensure(['./components/Test'], () => {
        resolve(require('./components/Test'));
    });
}

then, the component is lazy loaded. I can tell this because I am logging to the console. However, this seems to break all other JS and the CSS.

I can also see the new JS file created in the Network tab. It creates a 0.js file.

Based on this other question, I have also tried:

function loadView(view) {
    return () => import(/* webpackChunkName: "[request]" */ `./components/${view}.vue`)
}

Everything works fine here as well, but the component isn't lazy loaded.

app.js

import Vue from 'vue';
import router from './router.js';

new Vue({
    el: '#app',
    router
})

router.js

import Vue from 'vue';
import Router from 'vue-router';
// import Test from './components/Test'; // Everything works, but doesn't lazy load

// Lazy loads and logs to the console, but breaks all of the other JS and the CSS
const Test = resolve => {
    require.ensure(['./components/Test'], () => {
        resolve(require('./components/Test'));
    });
}

// Also tried this way, which works, but does not lazy load
// function loadView(view) {
//     return () => import(/* webpackChunkName: "[request]" */ `./components/${view}.vue`)
// }

Vue.use(Router);

export default new Router({
    routes: [
        {
            path: '/',
            components: {
                test: Test
                // test: loadView('Test') // 
            }
        },
        {
            path: '/news',
            components: {}
        }
    ],
    mode: 'history',
});

Test.vue

<template>
    <div>
        <h1>This is a test</h1>
    </div>
</template>

<script>
    export default {
    }
    console.log('hey, this is from test.vue');
</script>

<style lang="scss" scoped>
</style>

app.blade.php

• Includes <div id="app"></div> within body

home.blade.php

• Includes <router-view name="test"></router-view>

news.blade.php

• Also includes <router-view name="test"></router-view>, just to test.

Update 1:

Based on this question: Lazy Loading Components not working with Vue Router, I have updated the loadView function, but am still not able to load the CSS.

function loadView(view) {
    return () => import(`./components/${view}.vue`)
}

Update 2:

Based on this question: vuejs lazy loading components without the router, I tried to import the component and set it to a constant:

const Test = () => import(
  /* webpackChunkName: "./js/Test" */ './components/Test'
)

The lazy loading works perfectly, but the CSS still doesn't load.

Update 3:

When using import Test from './components/Test';, I notice that the app.css file is compiled successfully to 560 KiB.

However, when using const Test = () => import(/* webpackChunkName: "./js/Test" */ './components/Test');, this same file fails to compile, and instead remains at 0 bytes. 🤔