Laravel Vue Non SPA - How to split the files for every page for its vue js components?

Question

My application is using laravel vue but not SPA,.. so im still using laravel blades to separate the pages. Every page are importing app.js. My App.js is compiled by webpack and all my vue components are compiled on that file. so the problem is the app.js getting MB size and the every page will slow to load that file. Is their way to split the code of vuejs or separate the file for every pages using webpack?

this is my webpack.js in my web application.

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

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.setPublicPath('public')
    .setResourceRoot('../') // Turns assets paths in css relative to css file
    // .options({
    //     processCssUrls: false,
    // })
    .sass('resources/sass/frontend/app.scss', 'css/frontend.css')
    .sass('resources/sass/backend/app.scss', 'css/backend.css')
    .js('resources/js/frontend/app.js', 'js/app.js')
    .js([
        'resources/js/backend/before.js',
        'resources/js/backend/app.js',
        'resources/js/backend/after.js'
    ], 'js/backend.js')

    .extract([
        // Extract packages from node_modules to vendor.js
        'jquery',
        'bootstrap',
        'popper.js',
        'axios',
        'sweetalert2',
        'lodash'
    ])
    .sourceMaps();

if (mix.inProduction()) {
    mix.version()
        .options({
            // Optimize JS minification process
            terser: {
                cache: true,
                parallel: true,
                sourceMap: true
            }
        });
} else {
    // Uses inline source-maps on development
    mix.webpackConfig({
        devtool: 'inline-source-map'
    });
}

My laravel is using laravel boiler plate template and he separated the other files into vender.js. And my problem is the app.js getting biggger size and it will hard to load for the users have slower connection.

Andy Song Andy Song · Accepted Answer · 2020-08-28T03:32:04

As far as I know, the best you can do is that using Dynamic Imports, laravel-mix internally uses webpack code-splitting and it's included out of the box by the latest version of laravel-mix.

Add this to your webpack.mix.js file

mix.babelConfig({
  plugins: ['@babel/plugin-syntax-dynamic-import'],
});

And also you need to change how you import your components.

// Standard import
import StandardComponent from './components/ExampleComponent.vue';

// Dynamic import
const DynamicallyImportedComponent =
        () => import('./components/ExampleComponent.vue');

By doing this way laravel-mix will compile the component in a separate file. And dynamically insert the file in your html head section. So will only insert the file if it is needed.

Webpack will split the dynamically imported files into chunks and name them 0.js, 1.js, etc. If you want to configure the chunk name for a file, you need to add a “magic” comment to the import statement to tell Webpack the name you want to use. Just like how you would do it in a webpack setup. Like:

const DynamicallyImportedComponent =
        () => import(/* webpackChunkName: "dynamically-imported-component" */ './components/ExampleComponent.vue');

Laravel Vue Non SPA - How to split the files for every page for its vue js components?

1 Answers