laravel mix - lazy loading Vue components

STEP:1

Run this following command

*npm install --save-dev babel-plugin-dynamic-import-webpack

*npm install --save-dev babel-plugin-syntax-dynamic-import

STEP:2

Create a file in the root of your Laravel application called .babelrc with the following contents.

{

    "plugins": ["syntax-dynamic-import"]

}

STEP:3

Update your webpack.mix.js file to the following:

let mix = require('laravel-mix');

// Override mix internal webpack output configuration

mix.config.webpackConfig.output = {

    chunkFilename: 'js/pages/[name].bundle.js',

    publicPath: '/',

};

STEP:4

Instead of loading components in the standard way,

Vue.component(

    'example-component',

    require('./components/ExampleComponent.vue') 

);

We need to use the lazy loading import method.

Vue.component(

    'example-component', 

    () => import(

        /* webpackChunkName: "example-component" */

        './components/ExampleComponent.vue'

    )

);

Ref:https://acode.ninja/posts/laravel-mix-lazy-loading-vue-components/