Split app.js bundle in two parts.

[Aniket-IN]

Hi,
This is the stack I'm using React.js, Inertia, Laravel

I'm trying to split my application into two parts.
There are pages that everyone can view and also routes (starts with /admin) that only a few authorized users can view.
I don't want everyone to download the unnecessary pages, that they can't even access.

What would be the best way to achieve this?

I tried Code Splitting.

But that's not what I exactly want.
I mean code splitting will split all the pages in multiple bundles, but I don't want that.
I only want to split it into two parts.

Here's my current config

// app.js
import React from 'react';
import { render } from 'react-dom';
import { createInertiaApp } from '@inertiajs/inertia-react';
import { InertiaProgress } from '@inertiajs/progress';

const appName = window.document.getElementsByTagName('title')[0]?.innerText || 'Laravel';

createInertiaApp({
    title: title => `${title} - ${appName}`,
    resolve: name => require(`./Pages/${name}`),
    setup({ el, App, props }) {
        return render(<App {...props} />, el);
    },
});

// webpack.mix.js
mix.js('resources/js/app.js', 'public/js')
    .react()
    .postCss('resources/css/app.css', 'public/css', [
        require('postcss-import'),
        require('tailwindcss'),
        require('autoprefixer'),
    ])
    .sass('resources/sass/app.scss', 'public/css')
    .webpackConfig(require('./webpack.config'))
    .version();

Thank you so much for reading :)