Splitting Javascript in Inertia JS Laravel Mix build

Hey there, I have a SPA application on Inertia JS with Tailwind CSS. Most part of the application are internal facing. I have one form that is public facing. So I want to split javascript and css that only for the form. So it will not load unnecessary JS and CSS. That will increase the performance. I read Laravel Mix documentation that says it's possible to split vendor js. I am not proficient with webpack, so here I am in the wild. Any help would be appreciated. Thanks in advance.

undeportedmexican

4 years ago

Level 15

Not super sure for Tailwind CSS how would it look, but indeed Laravel mix can create multiple files, you only need to create the appropriate resources:

For instance, I have a vendor.js file and an app.js file both in the resources/js folder. What mix is doing here, is creating a vendor.js file and app.js file in the public/js folder.

mix
    .js('resources/js/vendor.js', 'public/js')
    .js('resources/js/app.js', 'public/js')
    .vue(3)
    .postCss('resources/css/app.css', 'public/css', [
        require('tailwindcss'),
    ])
    .version();

You can name the files whatever you want, and Laravel mix will compile it to the corresponding name in the public/js folder.

Surely the CSS files could be a similar path, but since Tailwind has its own compiler, I'm not super sure how would that work, however, I wouldn't overly bother about the CSS file, it's possible it won't be replaced as much.

mah3uz

4 years ago

Level 5

@undeportedmexican Thank you. How would webpack know which code split to which file. But lets say I just want to split only my forms related JS code. When the form page load it will only load the form related javascript only. My application build produce a javascript file that is almost 1.8MB, I think my only form page would have less than 50KB after build.

undeportedmexican

4 years ago

Best Answer

Level 15

@mah3uz Yeah, my example won't work for you because in your case, you want to split the inertia app itself.

For that case, take a look at this video:

https://laracasts.com/series/inertia-and-spa-techniques/episodes/2

That basically turns the inertia app into multiple files, and only pulls in the files you actually use.

2 likes

mah3uz

4 years ago

Level 5

@undeportedmexican Thank you very much. It's the way I wanted. One downside there is loosing cache bursting ability.

undeportedmexican

4 years ago

Level 15

@mah3uz I believe cache busting should keep working as usual? The manifest file controls that. I could be wrong tho, I haven't really played with it.

mah3uz

4 years ago

Level 5

@undeportedmexican for cache bursting on chunk I had to configure webpack output as I found on Inertia documentation

undeportedmexican

4 years ago

Level 15

@mah3uz Interesting to know, I would've thought laravel mix took care of this.

Thanks for the link!

Please or to participate in this conversation.