浏览器缓存问题

今天调试时，遇到一个浏览器缓存问题，修改页面代码，却没有变化。还以为代码问题，检查了许久都没看出哪里错误来，结果最后清除浏览器缓存就好了。

尴尬，这么弱智的问题。

然后在网上寻找解决办法，发现浏览器缓存问题有现成的解决方案，记录下来以备后用。

问题描述

现代化的浏览器，会对静态文件进行缓存，主要包括图片资源、 .css 、.js 等后缀的文件。这是一个浏览器的优化功能，极大地加快了网页的加载速度，但是在我们日常开发和维护中，有时候会造成混淆。

开发时，你明明修改了样式，但是刷新浏览器却看不见变化，然后你就来回不断地修改你的样式文件、重新编译、做各种测试，浏览器页面仍然一成不变。直到你重新刷新好多次，或者修改样式文件名称时，才恍然大悟，原来是浏览器缓存了。

解决方案

Laravel Mix 给出的方案是为每一次的文件修改做哈希处理。只要文件修改，哈希值就会变，提醒客户端需要重新加载文件，很巧妙地解决了我们的问题。我们只需要对 webpack.mix.js 稍作修改，即可使用此功能：

const mix = require('laravel-mix');

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

模板文件：

<link href="{{ mix('css/app.css') }}" rel="stylesheet">
<script src="{{ mix('js/app.js') }}"></script>

mix() 方法与 webpack.mix.js 文件里的逻辑遥相对应。