Optimize Performance With Laravel Mix
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
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
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!