摘要：本文介紹了瀏覽器緩存的機制和緩存在中的應用。瀏覽器緩存機制的過程如下強緩存本地緩存強緩存是最徹底的緩存，無需向服務器發(fā)送請求，通常用于圖片等靜態(tài)資源。瀏覽器發(fā)送請求后會先判斷本地是否有緩存。

網(wǎng)絡請求會耗費大量時間和請求，如果可以重用為改變的網(wǎng)絡資源，對于用戶來說可以更快更流暢的查看網(wǎng)頁，對于服務器來說減少了很多負荷，所以瀏覽器緩存是前端優(yōu)化的重要內(nèi)容。本文介紹了瀏覽器緩存的機制和緩存在webpack中的應用。

瀏覽器緩存分為兩種類型：

強緩存：也稱為本地緩存，不向服務器發(fā)送請求，直接使用客戶端本地緩存數(shù)據(jù)

協(xié)商緩存：也稱304緩存，向服務器發(fā)送請求，由服務器判斷請求文件是否發(fā)生改變。如果未發(fā)生改變，則返回304狀態(tài)碼，通知客戶端直接使用本地緩存；如果發(fā)生改變，則直接返回請求文件。

瀏覽器緩存機制的過程如下：

強緩存是最徹底的緩存，無需向服務器發(fā)送請求，通常用于css、js、圖片等靜態(tài)資源。瀏覽器發(fā)送請求后會先判斷本地是否有緩存。如果無緩存，則直接向服務器發(fā)送請求；如果有緩存，則判斷緩存是否命中強緩存，如果命中則直接使用本地緩存，如果沒命中則向服務器發(fā)送請求。判斷是否命中本地緩存的方法有兩種：Expires和Cache-Control。

Expires是http1.0的響應頭，代表的含義是資源本地緩存的過期時間，由服務器設定。服務器返回給瀏覽器的響應頭中如果包含Expires字段，瀏覽器發(fā)送請求時拿當前時間和Expires字段值進行比較，判斷資源緩存是否失效。如下圖所示：

Date代表請求資源的時間，Expires代表資源緩存的過期時間，可以看到服務器設置資源的緩存時間為5分鐘。2017-02-10 07:53:19之前，請求這個資源就是命中本地緩存。超過這個時間再去請求則不命中。

Cache-Control是http1.0中新增的字段。由于Expires設置的是資源的具體過期時間，如果服務器時間和客戶端時間不一樣，就會造成緩存錯亂，比如認為調(diào)節(jié)了客戶端的時間，所以設置資源有效期的時長更合理。http1.1添加了Cache-Control的max-age字段。max-age代表的含義是資源有效期的時長，是一個相對時長，單位為s。

Cache-Control: max-age = 300設置資源的過期時間為5分鐘。瀏覽器再次發(fā)送請求時，會把第一次請求的時間和max-age字段值相加和當前時間比較，以此判斷是否命中本地緩存。max-age使用的都是客戶端時間，比Expires更可靠。如果max-age和Expires同時出現(xiàn)，max-age的優(yōu)先級更高。Cache-Control提供了更多的字段來控制緩存：

no-store,不判斷強緩存和協(xié)商緩存，服務器直接返回完整資源

no-cache,不判斷強緩存，每次都需要向瀏覽器發(fā)送請求，進行協(xié)商緩存判斷

public,指示響應可被任何緩存區(qū)緩存

private,通常只為單個用戶緩存，不允許任何共享緩存對其進行緩存,通常用于用戶個人信息

協(xié)商緩存的判斷在服務器端進行，判斷是否命中的依據(jù)就是這次請求和上次請求之間資源是否發(fā)生改變。未發(fā)生改變命中，發(fā)生改變則未命中。判斷文件是否發(fā)生改變的方法有兩個：Last-Modified、If-Modified-Since和Etag、If-None-Match。

Last-Modified是http1.0中的響應頭字段，代表請求的資源最后一次的改變時間。If-Modified-Since是http1.0的請求頭，If-Modified-Since的值是上次請求服務器返回的Last-Modified的值。瀏覽器第一次請求資源時，服務器返回Last-Modified,瀏覽器緩存該值。瀏覽器第二次請求資源時，用于緩存的Last-Modified賦值給If-Modified-Since，發(fā)送給服務器。服務器判斷If-Modified-Since和服務器本地的Last-Modified是否相等。如果相等，說明資源未發(fā)生改變，命中協(xié)商緩存；如果不相等，說明資源發(fā)生改變，未命中協(xié)商緩存。

可以看到該請求返回的是304狀態(tài)碼，說明資源的Last-Modified未改變，所以這次請求的Last-Modified和If-Modified-Since是一致的。

Last-Modified、If-Modified-Since使用的都是服務器提供的時間，所以相對來說還是很可靠的。但是由于修改時間的精確級別或者定期生成文件這種情況，會造成一定的錯誤。所以http1.1添加Etag、If-None-Match字段，完善協(xié)商緩存的判斷。Etag是根據(jù)資源文件內(nèi)容生成的資源唯一標識符，一旦資源內(nèi)容發(fā)生改變，Etag就會發(fā)生改變?；趦?nèi)容的標識符比基于修改時間的更可靠。If-None-Match的值是上次請求服務器返回的Etag的值。Etag、If-None-Match的判斷過程和Last-Modified、If-Modified-Since一致，Etag、If-None-Match的優(yōu)先級更高。

強緩存的優(yōu)勢很明顯，無需向服務器發(fā)送請求，節(jié)省了大量的時間和帶寬。但是有一個問題，緩存有效期內(nèi)想更新資源怎么辦？我在工程中還遇到另外一個問題，一個項目有四個環(huán)境，測試環(huán)境、開發(fā)環(huán)境、在線確認環(huán)境、在線環(huán)境，四個環(huán)境的域名相同，這樣就會造成四個環(huán)境的緩存共用問題。比如先訪問了測試環(huán)境，index.js被換成到瀏覽器中，再切換到在線環(huán)境，在線環(huán)境會請求index.js,此時瀏覽器就會使用本地緩存中測試環(huán)境的index.js,造成代碼錯亂。

如何使強緩存失效，是問題的關鍵。通常的解決方法是更新文件名，文件名不一樣的話，瀏覽器就會重新請求資源。我們要保證新發(fā)布版本和不同環(huán)境中的文件名是不一樣的。其中一種方法在文件名后加版本號：

index.js?version=1
index.css?version=1

webpack提供了很簡單的方法可以配置緩存。

// webpack.config.js
module.exports = {
  entry: "main.js",
  output: {
    path: "/build",
    filename: "main.[hash].js"
  }
};

通過hash占位符，在每次生成打包文件時，都會通過文件內(nèi)容生成唯一的hash，并添加到輸出的文件名中。如果有多個入口文件，可以使用name占位符設置輸出：

// webpack.config.js
module.exports = {
  entry: {
      main:"main.js",
      sub:"sub.js"
  },
  output: {
    path: "/dist",
    filename: "[name].[hash].js"
  }
};

這時候有一個問題是，此時的hash是根據(jù)兩個文件的內(nèi)容來生成的，兩個文件名使用的hash是一致的。如果main.js和sub.js只有一個改變，兩個文件名都會改變，兩個文件都會重新請求，造成資源浪費。webpack提供了chunkhash來代替hash在多入口情況下使用。chunkhash是根據(jù)每個入口文件多帶帶生成的哈希值，避免上述情況。

webpack打包動態(tài)生成文件名，我們需要動態(tài)地把文件引用插入到html啟動文件中。html-webpack-plugin可以幫我很好地解決這個問題。html-webpack-plugin可以動態(tài)地生成一個html文件，并在html文件中動態(tài)插入webpack打包生成的資源文件。

var HtmlWebpackPlugin = require("html-webpack-plugin");
var webpackConfig = {
  entry: "main.js",
  output: {
    path: "/dist",
    publicPath: "/dist",
    filename: "main.[hash].js"
  },
  plugins: [new HtmlWebpackPlugin()]
};

默認在webpackConfig.output.path路徑下生成index.html,生成的html文件如下：

通常html啟動文件都有自定義的內(nèi)容，所以html-webpack-plugin提供了模板功能，template字段設置模板的路徑，html-webpack-plugin以template為模板，動態(tài)添加webpack打包生成的資源路徑。

var HtmlWebpackPlugin = require("html-webpack-plugin");
var webpackConfig = {
  entry: "main.js",
  output: {
    path: "/dist",
    publicPath: "/dist",
    filename: "main.[hash].js"
  },
  plugins: [new HtmlWebpackPlugin(
      {
          template:"index.html"
      }
  )]
};

原index.html內(nèi)容（index.html）：

生成的index.html內(nèi)容（distindex.html）：

最開始的時候靜態(tài)的index.html在根目錄下，webpack-dev-server設置的啟動路徑就是根目錄下的index.html,如果要啟動生成的index.html，還需要設置webpackConfig.output.publicPath：

var HtmlWebpackPlugin = require("html-webpack-plugin");
var webpackConfig = {
  entry: "main.js",
  output: {
    path: "/dist",
    publicPath: "/",
    filename: "main.[hash].js"
  },
  plugins: [new HtmlWebpackPlugin(
      {
          template:"index.html"
      }
  )]
};

這樣webpack-dev-server在內(nèi)存中生成的資源都存放在根目錄下，生成的index.html會代替原index.html啟動。

博客地址