CODEWITHSUNDEEP
laravelvuejs3inertiajs
Afraz Ahmad
Afraz Ahmad

Reputation: 5386

Laravel inertia large file size and long load time

I am working on Laravel Inertia project. app.js on local is 4MB When I load the same file on live server then it becomes 13-15MB. due to which page load time increases to 10-15 seconds.

I push file after compressing it by npm run prod

Local Response time file size on local

Live Response time On server

Everything is working great on local and live except file size issue.

app.js

require('./bootstrap');

// Import modules...
import { createApp, h } from 'vue';

import mitt from 'mitt';
const emitter = mitt();
import { App as InertiaApp, plugin as InertiaPlugin } from '@inertiajs/inertia-vue3';
import { InertiaProgress } from '@inertiajs/progress';
const el = document.getElementById('app');


const app = createApp({
render: () =>
    h(InertiaApp, {
        initialPage: JSON.parse(el.dataset.page),
        resolveComponent: (name) => 
    require(`./Pages/${name}`).default,
           }),
    })
.mixin({ methods: { route } })
.use(InertiaPlugin)
});
app.config.globalProperties.emitter = emitter;
app.mount(el);
InertiaProgress.init({ color: '#124664',showSpinner:false });

webpack.config.js

const path = require('path');
module.exports = {
    resolve: {
        alias: {
            '@': path.resolve('resources/js'),
        },
    },
};

webpack.mix.js

const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js')
.vue()
.postCss('resources/css/app.css', 'public/css/tailwind_css', [
    require('postcss-import'),
    // require('tailwindcss'),
    require('autoprefixer'),
])
.webpackConfig(require('./webpack.config'));

if (mix.inProduction()) {
    mix.version();
}

app.js is added in main blade in head tag file like this

<script src="{{ mix('js/app.js') }}" defer></script>

Upvotes: 2

Views: 3549

Answers (1)

Matheus Dal&#39;Pizzol
Matheus Dal&#39;Pizzol

Reputation: 6105

The problem is probably because you haven't configured Code Splitting correctly, which is causing all your files to be bundled into a single huge file.

You need to replace the synchronous require statement in you app.js with a dynamic import:

render: () =>
    h(InertiaApp, {
        initialPage: JSON.parse(el.dataset.page),
        resolveComponent: (name) => 
           require(`./Pages/${name}`).default, // This line is bundling all your files together
        }),
    })

render: () =>
    h(InertiaApp, {
        initialPage: JSON.parse(el.dataset.page),
        resolveComponent: (name) => 
           import(`./Pages/${name}`), // Now, each page will have its respective file
        }),
    })

Laravel mix will probably handle the tooling need for Webpack to handle dynamic imports, but in case you're having troubles, take a look at the docs which explains what you'll need in details.

Upvotes: 4

Related Questions