为 Laravel Mix 编译的 JavaScript 和 CSS 文件加版本号

最新推荐文章于 2022-12-06 14:10:48 发布

黑面狐 sa~

最新推荐文章于 2022-12-06 14:10:48 发布

阅读量1.2k

点赞数

分类专栏：前端 laravel

前端同时被 2 个专栏收录

60 篇文章

订阅专栏

laravel

1 篇文章

订阅专栏

本文解析了为何在前端开发中为JavaScript和CSS文件添加版本号至关重要。通过实例展示了如何利用Laravel中的mix()方法自动添加版本号，确保浏览器加载最新编译文件，避免缓存导致的更新延迟。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

加版本号，什么意思？我们来看 Github 网页源码中是怎样引入 JavaScript 和 CSS 文件的。

<link crossorigin="anonymous" href="https://assets-cdn.github.com/assets/frameworks-e04a23d39bf81b7db3c635177756ef51bc171feb440be9e174933c6eb56382da.css" integrity="sha256-4Eoj05v4G32zxjUXd1bvUbwXH+tEC+nhdJM8brVjgto=" media="all" rel="stylesheet" />

<script crossorigin="anonymous" integrity="sha256-nL0D6lZGHoSriVa/d5mpd9bMih+YTHG17LLt/bo9dz8=" src="https://assets-cdn.github.com/assets/frameworks-9cbd03ea56461e84ab8956bf7799a977d6cc8a1f984c71b5ecb2edfdba3d773f.js"></script>

本质上引入的文件是 frameworks.css 和 frameworks.js，e04a23d39bf81b7db3c635177756ef51bc171feb440be9e174933c6eb56382da 和 9cbd03ea56461e84ab8956bf7799a977d6cc8a1f984c71b5ecb2edfdba3d773f 就是指版本号。版本号可以是一个时间戳，也可以是一个唯一的令牌（token）。

为什么要加？
那么加版本号有什么好处呢？这个问题问得好 ?
答案就是为了强制浏览器加载最新的编译文件，因为浏览器为了性能考虑，在一段时间内同一个资源如果本地存在，就不会从远方的服务器抓取。这就带来一个问题——修改的效果在用户的浏览器中可能不会立即生效，那么此时为每一个新编译的文件加一个唯一的版本号就变得有必要了，因为只要编译了文件，页面中引入的文件名总是不一样，所以浏览器总是会发出请求，使用最新的编译文件。

在 Laravel 中用
在 Laravel 中，为编译文件加版本号非常方便，只要在 webpack.mix.js 文件中，在设定 Laravel Mix 编译规则的地方使用 version() 方法就 OK 了 ?

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

下面执行 npm run dev，输出的文件为

public/js/app.a92101167c611fee1b3a.js
public/css/app.5d9cb0105749a63e10d03d4e6ef535ab.css

在 layouts/app.blade.php 中的引入方式也要改变。

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

<!-- 改为 -->

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

这样，就可以正确引入编译后、带版本号的编译文件了。

mix 是怎么做到的
有人可能会问了，我明明给的是 '/css/app.css 和 /js/app.js，mix() 是怎样做到引入正确版本号的编译文件呢？这个问题问得好 ?
其实每次执行 npm run dev 和 npm run production 的时候，还会在 public 目录下生成一个 mix-manifest.json 文件，内容类似下面这样：

{
  "/js/app.js": "/js/app.a92101167c611fee1b3a.js",
  "/css/app.css": "/css/app.5d9cb0105749a63e10d03d4e6ef535ab.css"
}

你可能就明白了——传递给 mix() 方法的参数其实是一个 Key ，而不是一个文件名。mix() 方法就是从 mix-manifest.json 文件中找到 Key 对应的 Value 的 ?