翻譯 | 關鍵CSS和Webpack: 減小阻塞渲染的CSS的自動化解決方案

時間 2019-11-06

標籤翻譯關鍵 css webpack 減小阻塞渲染自動化解決方案欄目 CSS 简体版

原文原文鏈接

原文地址: Critical CSS and Webpack: Automatically Minimize Render-Blocking CSS
原文做者: Anthony Gore
譯者: 蝸牛(GivenCui)
校對者: veizz

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

當一個網頁被訪問時，Google但願它僅加載對初始視圖有用的內容，並使用空閒時間來加載其餘內容。這種方式可使用戶儘量早地看到頁面。 css

咱們能夠作不少事情來減小阻塞渲染的JavaScript，例如code splitting、tree shaking，緩存等。 html

可是如何減小阻塞渲染的CSS？爲此，能夠拆分並優先加載首次渲染所須要的CSS（關鍵CSS)，而後再加載其它CSS。前端

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

什麼是阻塞渲染

若是資源是「阻塞渲染」的，則表示瀏覽器在資源下載或處理完成以前不會顯示該頁面。 java

一般，咱們在html的head標籤中添加CSS樣式表，這種方式會阻塞渲染，以下所示：webpack

<head>
  <link rel="stylesheet" href="/style.css">
  ...
</head>
<body>
  <p>在style.css下載完以前，你看不到我！！！</p>
</body>

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

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

那麼，咱們是否應該把link標籤放到body中，以防止阻塞渲染？你能夠這麼作，可是阻塞渲染也不是全無優勢，咱們實際上能夠利用它。若是頁面渲染時沒有加載任何CSS，咱們會遇到醜陋的"內容閃現"。 web

咱們想要的完美解決方案就應該是：首屏相關的關鍵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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>vuestrap-code-split</title>
    <link href="/style.css" rel="stylesheet">
</head>
<body>
  <!--App content goes here, omitted for brevity.-->
  <script type="text/javascript" src="/build_main.js"></script>
</body>
</html>

編程識別關鍵CSS

手動區分關鍵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更新爲:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>Bootstrap Critical</title>
  <style type="text/css">
    /* 關鍵CSS經過內部樣式表方式引入 */
    body {
      font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
      font-size: 14px;
      line-height: 1.42857;
      color: #333;
      background-color: #fff;
    }
    ...
  </style>
  <link href="/style.96106fab.css" rel="preload" as="style" onload="this.rel='stylesheet'">
  <noscript>
      <link href="/style.96106fab.css" rel="stylesheet">
  </noscript>
  <script>
    /*用來加載非關鍵CSS的腳本*/
  </script>
</head>
<body>
  <!-- 這裏是App的內容 -->
  <script type="text/javascript" src="/build_main.js"></script>
</body>
</html>

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

內聯嵌入關鍵CSS樣式

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

預加載非關鍵CSS

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

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

<link href="/style.96106fab.css" rel="preload" as="style" onload="this.rel='stylesheet'">

把Critical組件添加到webpack打包流程中

我建立了一個名爲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,
      }
    })
  ] 
};