Asset Versioning and Hashes0:00
So take a look. Once again, I'm compiling down some JavaScript and Sass. Let's run that. We'll give it just a second. Okay. And now in my public directory, you'll come across this mix-manifest.json file. And by default, the keys and the values will be identical, which is confusing. What is the point of this file? Well, where it really comes into play is when you apply versioning. So versioning is the process of adding a unique, specific hash to each of your files. And then you push that up to your server, and your server can cache that file as long as it possibly can. But when it caches it, you need some way to tell your server down the line, hey, some things have changed here, and I want you to throw out that old cache and create a new one. So what do we do? Well, we generate a new hash. And when that new hash is applied to the file, we push it up to your server. Your server then detects, oh, this file is different. I'm
Enabling mix.version0:44
one. So what do we do? Well, we generate a new hash. And when that new hash is applied to the file, we push it up to your server. Your server then detects, oh, this file is different. I'm going to throw out that old cache and create a new one. That's the way that works. So take a look. We're going to come back, and we'll add mix.version to our build script. And we'll give that another run. All right. Now if we switch over, you'll see one difference. Now the value has this unique hash applied to it. So if I were to give that another run, yeah, nothing's going to change here. This will all remain identical because that hash is dependent upon the contents of the file. So the contents of the file, if you basically run an MD5 on it, will create a hash, and that is what we apply here. But now take a look. If we were to go to one of our files, and let's just say alert foobar, we're just going to make some kind of change. And we'll give this another run. And yeah,
Cache Busting via Manifest1:30
apply here. But now take a look. If we were to go to one of our files, and let's just say foobar, we're just going to make some kind of change. And we'll give this another run. And yeah, take a look here. If we, yeah, there we go. So here is the new hash, and this is basically what we had before. So the contents of the file will determine this hash. And once again, the entire point of all of this is to assist with cache busting. If your JavaScript file has changed, once you push it to production, you need some way to tell your server, hey, you need to clear the cache for this file because there's new stuff here, and I don't want you pulling from the old cache. It's going to break everything. So this is what mix.version allows for. But now that introduces a new question. If this file keeps changing, we can't just hard code that hash there. So that's where mix-manifest.json comes into play. It gives you a JavaScript object that we can read
Using Laravel mix Helper2:14
introduces a new question. If this file keeps changing, we can't just hard code that hash there. So that's where mix-manifest.json comes into play. It gives you a JavaScript object that we can read and immediately grab the hashed version of the file. So we can say, this is the file I want, but I do want that to have the unique version applied to it. So give me the value associated with that path. Now, if you're using Laravel, you can reference the mix helper function, and it's a global, so you can just do something like this. And then we would do the same thing up here. mix. And you know what? Even if you're not using versioning just yet, I would say it's a good practice to start with this. That way, if you do switch over to versioned assets, you don't have to update any of these files to reference your mix function. Everything will still work just like it did before. Okay. So anyways, let's switch over to Chrome. If I view the source,
Mix Helper Reads Manifest2:58
have to update any of these files to reference your mix function. Everything will still work just like it did before. Okay. So anyways, let's switch over to Chrome. If I view the source, now you can see that in both places we are referencing that unique hash, and it will be dynamic. So if we come back and we make a change, let's run this again, that will change the hash. So if we come back to Chrome, keep an eye on this right here, refresh. Yeah, now it has changed. So that's what the mix helper function is doing. And in fact, if you're curious, let's look at that mix helper. You give it a path to the file, and you can actually ignore a lot of this. A lot of this is just normalizing the path. But then here, we read the file. So we're reading the mix manifest.json file. We're grabbing that as a JavaScript object. And then we try to reference the path. So if you give us that, we're going to look into it and grab the value associated with it. So right there,
