為 Laravel Mix 編譯的 JavaScript 和 CSS 檔案加版本號

zhangbao發表於2017-07-02
Laravel編譯JavaScriptCSS

什麼意思？

加版本號，什麼意思？我們來看 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）。

為什麼要加？

那麼加版本號有什麼好處呢？這個問題問得好 :wave:

答案就是為了強制瀏覽器載入最新的編譯檔案，因為瀏覽器為了效能考慮，在一段時間內同一個資源如果本地存在，就不會從遠方的伺服器抓取。這就帶來一個問題——修改的效果在使用者的瀏覽器中可能不會立即生效，那麼此時為每一個新編譯的檔案加一個唯一的版本號就變得有必要了，因為只要編譯了檔案，頁面中引入的檔名總是不一樣，所以瀏覽器總是會發出請求，使用最新的編譯檔案。

在 Laravel 中用

在 Laravel 中，為編譯檔案加版本號非常方便，只要在 webpack.mix.js 檔案中，在設定 Laravel Mix 編譯規則的地方使用 version() 方法就 OK 了 :+1:

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() 是怎樣做到引入正確版本號的編譯檔案呢？這個問題問得好 :metal:

其實每次執行 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 的 :clap:

本作品採用《CC 協議》，轉載必須註明作者和本文連結

相關文章