關(guān)鍵CSS和Webpack: 減少阻塞渲染的CSS的自動化解決方案

作者：iKcamp 2017-10-11 16:55:32

如何減少阻塞渲染的CSS?為此，可以拆分并優(yōu)先加載首次渲染所需要的CSS(關(guān)鍵CSS)，然后再加載其它CSS。可以通過編程的方式篩選出關(guān)鍵CSS，在本文中，我將向你展示如何通過Webpack的自動化流程來實現(xiàn)該方案。

[[206012]]

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

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

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

但是如何減少阻塞渲染的CSS?為此，可以拆分并優(yōu)先加載***渲染所需要的CSS(關(guān)鍵CSS)，然后再加載其它CSS。

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

什么是阻塞渲染

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

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

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

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

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

那么，我們是否應(yīng)該把link標(biāo)簽放到body中，以防止阻塞渲染?你可以這么做，但是阻塞渲染也不是全無優(yōu)點，我們實際上可以利用它。如果頁面渲染時沒有加載任何CSS，我們會遇到丑陋的"內(nèi)容閃現(xiàn)"。

我們想要的***解決方案就應(yīng)該是：首屏相關(guān)的關(guān)鍵CSS使用阻塞渲染的方式加載，所有的非關(guān)鍵CSS在首屏渲染完成后加載。

關(guān)鍵CSS

這里是我用Webpack和Bootstrap編寫的一個簡單的網(wǎng)頁, 下面的截圖是***渲染后的樣式。

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

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

critical.css

.nav { 
  ... 
} 
 
.jumbtron { 
  ... 
} 
 
.btn { 
  ... 
}

non_critical.css

.modal { 
  ... 
}

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

我們?nèi)绾斡贸绦騾^(qū)分關(guān)鍵CSS和非關(guān)鍵CSS?
如何讓頁面在***渲染之前加載關(guān)鍵CSS，之后加載非關(guān)鍵CSS?

示例項目

我將簡要介紹一下這個項目的基本配置，這樣我們在遇到解決方案時，方便快速消化。

首先, 在入口文件中引入Bootsrap SASS。

main.js

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

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

使用HTML Webpack Plugin來創(chuàng)建一個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 
    }) 
  ]  
};

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

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>

編程識別關(guān)鍵CSS

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

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

以下為對項目的設(shè)置:

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, 
   
  /* 確保調(diào)用打包后的JS文件 */ 
  penthouse: { 
    blockJSRequests: false, 
  } 
});

執(zhí)行時，會將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"> 
    /* 關(guān)鍵CSS通過內(nèi)部樣式表方式引入 */ 
    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> 
    /*用來加載非關(guān)鍵CSS的腳本*/ 
  </script> 
</head> 
<body> 
  <!-- 這里是App的內(nèi)容 --> 
  <script type="text/javascript" src="/build_main.js"></script> 
</body> 
</html>

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

內(nèi)聯(lián)嵌入關(guān)鍵CSS樣式

你會注意到，關(guān)鍵CSS已經(jīng)嵌入到文檔的頭部。這是***的，因為頁面不必從服務(wù)器加載它。

預(yù)加載非關(guān)鍵CSS

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

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

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

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

我創(chuàng)建了一個名為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, 
      } 
    }) 
  ]  
};

注意：你應(yīng)該只在生產(chǎn)版本中使用，因為它將使你的開發(fā)環(huán)境的構(gòu)建很慢

表現(xiàn)結(jié)果

現(xiàn)在已經(jīng)抽離了關(guān)鍵CSS，并且把非關(guān)鍵CSS的加載放到空閑時間，這在性能方面會有怎樣的提升呢?

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

不使用區(qū)分關(guān)鍵CSS技術(shù)的表現(xiàn)

使用區(qū)分關(guān)鍵CSS技術(shù)的表現(xiàn)

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

責(zé)任編輯：龐桂玉來源： segmentfault