Laravel inertia large file size and long load time - laravel

Question

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
Live Response time
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>

Answer 1

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.