關鍵CSS和Webpack：減少阻塞渲染的CSS的自動化解決方案

知識 10-11

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

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

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

什麼是阻塞渲染

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

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

關鍵CSS和Webpack：減少阻塞渲染的CSS的自動化解決方案

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

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

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

關鍵CSS和Webpack：減少阻塞渲染的CSS的自動化解決方案

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

關鍵CSS

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

關鍵CSS和Webpack：減少阻塞渲染的CSS的自動化解決方案

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

關鍵CSS和Webpack：減少阻塞渲染的CSS的自動化解決方案

首次渲染需要的樣式包括導航條的樣式、超大屏幕樣式、按鈕樣式、其它布局和字體的公用樣式。但是我們並不需要模態框的樣式，因為它不會立即在頁面中顯示。考慮到這些，下面是我們拆分關鍵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>

<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>

<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載入到頁面中的跨瀏覽器兼容方法。

把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,
}
})
]
};