Optimize Performance With Laravel Mix

Split your Laravel App’s vendor JavaScript from your application code to boost performance.

When using Laravel Mix and Webpack to bundle your Laravel application’s JavaScript, you generally save all of your app’s JavaScript into a single file. Let’s call ours app.js. This app.js file will include all of Vue, jQuery, axios, and any other 3rd party libraries we’re using. This means that whenever we deploy any update to a .vue file or any of our JavaScript code, our users need to be served a completely new file.

Pretend we changed the color of a button in one of our Vue components — a simple, single-line edit. When we run the npm run production command and push this update to the browser, all our users will be served a new app.js file. Even though Vue and jQuery’s codebases haven’t changed at all, and it was really only a single line of code we wrote that changed, they have to re-download the entire file. Not great for performance!

Out of the box, Laravel Mix includes a feature called Library Code Splitting. This allows us to specify our long-term, infrequently-changing vendor libraries using the extract() method:

mix.js(src, output).extract([‘jQuery’, ‘vue’, ‘axios’]);

Mix then takes these files and saves them into separate vendor.js file. Now, when we deploy changes to our app, our users can keep using their cached vendor.js file and only retrieve a new app.js file containing the modified code. The vendor.js file can be cached forever!

Like what you read? Give Zack Krida a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.