2.7. 浏览器缓存问题

本教程最新版为 9.x,当前版本已放弃维护,请阅读最新版本!

问题描述

现代化的浏览器,会对静态文件进行缓存,静态文件在本课程的范畴内,指的是 .css.js 后缀的文件。这是一个浏览器的优化功能,极大地加快了网页的加载速度,但是在我们日常开发和维护中,有时候会造成混淆。

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

解决方案

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

webpack.mix.js

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

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

以上可看出,我们只是增加了 version() 函数的调用,其他未做修改。

本文章首发在 LearnKu.com 网站上。

为了保证课程的高品质,我们需要对课程进行收费。付费后 才能观看剩余内容。 购买

上一篇 下一篇
《L05 电商实战》
从零开发一个电商项目,功能包括电商后台、商品 & SKU 管理、购物车、订单管理、支付宝支付、微信支付、订单退款流程、优惠券等
《L04 微信小程序从零到发布》
从小程序个人账户申请开始,带你一步步进行开发一个微信小程序,直到提交微信控制台上线发布。
讨论数量: 4

zongzigege
修改 webpack.mix.js 不生效问题
6 个点赞 | 5 个回复 | 问答 | 课程版本 5.7
sinmu
git add不生效,提示错误CRLF will be replaced by LF in .vscode/launch.json.
0 个点赞 | 16 个回复 | 分享 | 课程版本 8.x
修改 webpack.mix.js 不生效
0 个点赞 | 3 个回复 | 问答 | 课程版本 6.x
captainwong
Laravel8.*已经不会在源代码里表现?id=xxx了,如何理解?
0 个点赞 | 2 个回复 | 问答 | 课程版本 8.x