摘要：我們可以做很多事情來減少阻塞渲染的，例如，緩存等。但是如何減少阻塞渲染的為此，可以拆分并優先加載首次渲染所需要的關鍵，然后再加載其它。請注意，文件在標簽里引入，因此將會阻塞渲染。

原文地址: Critical CSS and Webpack: Automatically Minimize Render-Blocking CSS

原文作者: Anthony Gore

譯者: 蝸牛(GivenCui)

校對者: veizz

"消除阻塞渲染的CSS和JavaScript"。 這一條Google Page Speed Insights的建議總讓我困惑。

當一個網頁被訪問時，Google希望它僅加載對初始視圖有用的內容，并使用空閑時間來加載其他內容。這種方式可以使用戶盡可能早地看到頁面。

我們可以做很多事情來減少阻塞渲染的JavaScript，例如code splitting、tree shaking，緩存等。

但是如何減少阻塞渲染的CSS？為此，可以拆分并優先加載首次渲染所需要的CSS（關鍵CSS)，然后再加載其它CSS。

可以通過編程的方式篩選出關鍵CSS，在本文中，我將向你展示如何通過Webpack的自動化流程來實現該方案。

如果資源是“阻塞渲染”的，則表示瀏覽器在資源下載或處理完成之前不會顯示該頁面。

通常，我們在html的head標簽中添加CSS樣式表，這種方式會阻塞渲染，如下所示：

  
  ...


  
在style.css下載完之前，你看不到我！！！

當這個html頁面被網絡瀏覽器加載時，它將從上到下被逐行解析。當瀏覽器解析到link標簽時，它將立即開始下載CSS樣式表，在完成之前不會渲染頁面。

對于一個大型網站，尤其是像使用了Bootstrap這種龐大框架的網站，樣式表有幾百KB，用戶必須耐心等待其完全下載完才能看到頁面。

那么，我們是否應該把link標簽放到body中，以防止阻塞渲染？你可以這么做，但是阻塞渲染也不是全無優點，我們實際上可以利用它。如果頁面渲染時沒有加載任何CSS，我們會遇到丑陋的"內容閃現"。

我們想要的完美解決方案就應該是：首屏相關的關鍵CSS使用阻塞渲染的方式加載，所有的非關鍵CSS在首屏渲染完成后加載。

這里是我用Webpack和Bootstrap編寫的一個簡單的網頁, 下面的截圖是首次渲染后的樣式。

點擊Sign Up today按鈕會彈出一個模態框, 模態框彈出時的樣式如下:

首次渲染需要的樣式包括導航條的樣式、超大屏幕樣式、按鈕樣式、其它布局和字體的公用樣式。但是我們并不需要模態框的樣式，因為它不會立即在頁面中顯示。考慮到這些，下面是我們拆分關鍵CSS和非關鍵CSS的可能的方式：

critical.css

.nav {
  ...
}

.jumbtron {
  ...
}

.btn {
  ...
}

non_critical.css

.modal {
  ...
}

如果你已經有這個概念，那么你可能會提出兩個疑問：

我們如何用程序區分關鍵CSS和非關鍵CSS?

如何讓頁面在首次渲染之前加載關鍵CSS，之后加載非關鍵CSS？

我將簡要介紹一下這個項目的基本配置，這樣我們在遇到解決方案時，方便快速消化。
首先, 在入口文件中引入Bootsrap SASS。

main.js

require("bootstrap-sass/assets/stylesheets/_bootstrap.scss");

我使用sass-loader來處理sass，與Extract Text Plugin一起使用，將編譯出來的css放到多帶帶的文件中。

使用HTML Webpack Plugin來創建一個HTML文件，它引入編譯后的CSS。這在我們的解決方案中是必需的，你馬上就會看到。

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /.scss$/,
        use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: ["css-loader", "sass-loader"]
        })
      },
      ...
    ]
  },
  ...
  plugins: [
    new ExtractTextPlugin({ filename: "style.css" }),
    new HtmlWebpackPlugin({
      filename: "index.html",
      template: "index.html",
      inject: true
    })
  ] 
};

運行構建之后，這里是HTML文件的樣子。請注意，CSS文件在head標簽里引入，因此將會阻塞渲染。

index.html

手動區分關鍵CSS維護起來會非常痛苦。以編程方式來實現的話，我們可以使用Addy Osmani的Critical。這是一個Node.js模塊，它將讀入HTML文檔，并識別關鍵CSS。Critical能做的還不止這些，你很快就能體會到。

Critical識別關鍵CSS的方式如下：指定屏幕尺寸并使用PhantomJS加載頁面，提取在渲染頁面中用到的所有CSS規則。

以下為對項目的設置:

const critical = require("critical");

critical.generate({
  
  /* Webpack打包輸出的路徑 */
  base: path.join(path.resolve(__dirname), "dist/"),
  src: "index.html",
  dest: "index.html",
  inline: true,
  extract: true,

  /* iPhone6的尺寸，你可以按需要修改 */
  width: 375,
  height: 565,
  
  /* 確保調用打包后的JS文件 */
  penthouse: {
    blockJSRequests: false,
  }
});

執行時，會將Webpack打包輸出文件中HTML更新為:

它還將輸出一個新的CSS文件，例如style.96106fab.css（文件自動Hash命名）。這個CSS文件與原始樣式表相同，只是不包含關鍵CSS。

你會注意到，關鍵CSS已經嵌入到文檔的頭部。這是最佳的，因為頁面不必從服務器加載它。

你還會注意到，非關鍵CSS使用了一個看起來更復雜的link標簽來加載。rel="preload"通知瀏覽器開始獲取非關鍵CSS以供之后用。其關鍵在于，preload不阻塞渲染，無論資源是否加載完成，瀏覽器都會接著繪制頁面。

link標簽中的onload屬性允許我們在非關鍵CSS加載完成時運行腳本。Critical模塊可以自動將此腳本嵌入到文檔中，這種方式提供了將非關鍵CSS加載到頁面中的跨瀏覽器兼容方法。

我創建了一個名為HTML Critical Webpack Plugin的插件，該插件僅僅是Critical模塊的封裝。它將在HTML Webpack Plugin輸出文件后運行。

你可以在Webpack的項目中這樣引入：

const HtmlCriticalPlugin = require("html-critical-webpack-plugin");

module.export = {
  ...
  plugins: [
    new HtmlWebpackPlugin({ ... }),
    new ExtractTextPlugin({ ... }),
    new HtmlCriticalPlugin({
      base: path.join(path.resolve(__dirname), "dist/"),
      src: "index.html",
      dest: "index.html",
      inline: true,
      minify: true,
      extract: true,
      width: 375,
      height: 565,
      penthouse: {
        blockJSRequests: false,
      }
    })
  ] 
};

注意：你應該只在生產版本中使用，因為它將使你的開發環境的構建很慢

現在已經抽離了關鍵CSS，并且把非關鍵CSS的加載放到空閑時間，這在性能方面會有怎樣的提升呢?

我使用Chrome的Lighthouse擴展插件進行測試。請記住，我們嘗試優化的指標是“首次有效繪制”，也就是用戶需要多久才能看到真正可瀏覽的頁面。

不使用區分關鍵CSS技術的表現

使用區分關鍵CSS技術的表現

正如你所看到的，我的應用程序First Meaningful paint時間縮短了將近1秒，到達可交互狀態的時間節省了0.5秒。實際中，你的應用程序可能無法獲得如此驚人的改善，因為我的CSS很笨重（我包含了整個Bootstrap庫），而且在這樣一個簡單的應用程序中，我沒有很多關鍵CSS規則。

iKcamp原創新書《移動Web前端高效開發實戰》已在亞馬遜、京東、當當開售。
iKcamp官網：http://www.ikcamp.com