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 · Accepted Answer · 2020-08-28 03:32:04Z

3

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');

answered Aug 28, 2020 at 3:32

Andy Song

4,6821 gold badge14 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Leopoldz Over a year ago

Thanks @Andy,. this is great!,. i will study it...but do i need first to npm install the @babel/plugin-syntax-dynamic-import ? and also vue app will import the DynamicallyImportedComponent?

Andy Song Over a year ago

@LeopoldoAbing you do not need to install @babel/plugin-syntax-dynamic-import, it's included by the latest version of laravel-mix.

Andy Song Over a year ago

@LeopoldoAbing for the second question, no, you need to register by yourself for example new Vue({ el: '#app', components: { 'component-a': ComponentA } })

Andy Song Over a year ago

@LeopoldoAbing I hope that all make sense to you.

Leopoldz Over a year ago

i checked the compiled css files and it is empty,.

|

Collectives™ on Stack Overflow

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

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related