Skip to content

Latest commit

 

History

History
51 lines (36 loc) · 2.64 KB

versioning.md

File metadata and controls

51 lines (36 loc) · 2.64 KB
Raw

Versioning

mix.js('src', 'output')
   .version();

To assist with long-term caching, Laravel Mix provides the mix.version() method, which enables file name hashing. such as app.8e5c48eadbfdd5458ec6.js. This is useful for cache-busting. Imagine that your server automatically caches scripts for a year, to improve performance. That's great, but, each time you make a change to your application code, you need some way to instruct the server to bust the cache. This is typically done through the use of query strings, or file hashing.

With versioning enabled, each time your code changes, a new hashed file will be generated, and the old one will be deleted. Consider the following webpack.mix.js file.

let mix = require('laravel-mix').mix;

mix.js('resources/assets/js/app.js', 'public/js');
   .sass('resources/assets/sass/app.sass', 'public/css')
   .version();

Upon compilation, you'll see ./public/css/app.8e5c48eadbfdd5458ec6.css and ./public/js/app.8e5c48eadbfdd5458ec6.js. Of course, your particular hash will be unique. Each time you adjust your JavaScript, the compiled files will receive a newly hashed name, which will effectively bust the cache, once pushed to production.

As an example, try runningwebpack --watch, and then change a bit of your JavaScript. You'll instantly see a newly generated bundle and stylesheet.

Importing Versioned Files

This all begs the question: how exactly do we include these versioned scripts and stylesheets into your HTML, if the names keep changing? Yes, that can be tricky. The answer will be dependent upon the type of application you're building. For SPAs, you may dynamically read mix's generated mix.json file, extract the asset file names (these will be updated for each compile to reflect the new versioned file), and then generate your HTML.

Laravel Users

For Laravel projects, a solution is provided out of the box. Simply call the global mix() function, and you're done! We'll figure out the proper file name to import. Here's an example:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>App</title>
        {!! mix('css/app.css') !!}
    </head>
    <body>
        <div id="app">
            <h1>Hello World</h1>
        </div>

        {!! mix('js/app.js') !!}
    </body>
</html>

Pass the unhashed file path to the mix() function, and, behind the scenes, we'll figure out which scripts or stylesheets should be imported. Even if you're extracting vendor libraries (with mix.extract()), this function will correctly return all necessary imports. Please note that you may use this function, even if you're not versioning your files.