摘要：我們可以做很多事情來(lái)減少阻塞渲染的，例如，緩存等。但是如何減少阻塞渲染的為此，可以拆分并優(yōu)先加載首次渲染所需要的關(guān)鍵，然后再加載其它。請(qǐng)注意，文件在標(biāo)簽里引入，因此將會(huì)阻塞渲染。

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

原文作者: Anthony Gore

譯者: 蝸牛(GivenCui)

校對(duì)者: veizz

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

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

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

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

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

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

通常，我們?cè)趆tml的head標(biāo)簽中添加CSS樣式表，這種方式會(huì)阻塞渲染，如下所示：

  
  ...


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

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

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

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

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

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

點(diǎn)擊Sign Up today按鈕會(huì)彈出一個(gè)模態(tài)框, 模態(tài)框彈出時(shí)的樣式如下:

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

critical.css

.nav {
  ...
}

.jumbtron {
  ...
}

.btn {
  ...
}

non_critical.css

.modal {
  ...
}

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

我們?nèi)绾斡贸绦騾^(qū)分關(guān)鍵CSS和非關(guān)鍵CSS?

如何讓頁(yè)面在首次渲染之前加載關(guān)鍵CSS，之后加載非關(guān)鍵CSS？

我將簡(jiǎn)要介紹一下這個(gè)項(xiàng)目的基本配置，這樣我們?cè)谟龅浇鉀Q方案時(shí)，方便快速消化。
首先, 在入口文件中引入Bootsrap SASS。

main.js

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

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

使用HTML Webpack Plugin來(lái)創(chuàng)建一個(gè)HTML文件，它引入編譯后的CSS。這在我們的解決方案中是必需的，你馬上就會(huì)看到。

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

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

index.html

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

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

以下為對(duì)項(xiàng)目的設(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í)行時(shí)，會(huì)將Webpack打包輸出文件中HTML更新為:

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

你會(huì)注意到，關(guān)鍵CSS已經(jīng)嵌入到文檔的頭部。這是最佳的，因?yàn)轫?yè)面不必從服務(wù)器加載它。

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

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

我創(chuàng)建了一個(gè)名為HTML Critical Webpack Plugin的插件，該插件僅僅是Critical模塊的封裝。它將在HTML Webpack Plugin輸出文件后運(yùn)行。

你可以在Webpack的項(xiàng)目中這樣引入：

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)版本中使用，因?yàn)樗鼘⑹鼓愕拈_發(fā)環(huán)境的構(gòu)建很慢

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

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

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

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

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

iKcamp原創(chuàng)新書《移動(dòng)Web前端高效開發(fā)實(shí)戰(zhàn)》已在亞馬遜、京東、當(dāng)當(dāng)開售。
iKcamp官網(wǎng)：http://www.ikcamp.com