翻译 | 关键CSS和Webpack: 减少堵塞渲染的CSS的自动化解决方案

Bootstrap 1

  • 初稿地址: Critical CSS and Webpack: Automatically Minimize
    Render-Blocking
    CSS
  • 原稿作者: Anthony Gore
  • 译者: 蜗牛(GivenCui)
  • 校对者: veizz

“消除隔阂渲染之CSS和JavaScript”。 这同一漫漫Google Page Speed
Insights的建议总为自家疑惑。

当一个网页为访问时,Google希望她只有加载对始发视图有用之始末,并使空闲时间来加载其他情节。这种方法可使用户尽可能早地观看页面。

Bootstrap 2

俺们好做过多事务来减少堵塞渲染的JavaScript,例如code splitting、tree
shaking,缓存等。

而什么减少堵塞渲染的CSS?为之,可以拆分并先加载首糟糕渲染所急需之CSS(关键CSS),然后再加载其它CSS。

可以经过编程的章程筛选产生要CSS,在本文中,我将向你显得什么通过Webpack的自动化流程来兑现该方案。

哟是死渲染

要是资源是“阻塞渲染”的,则表示浏览器在资源下载或者拍卖好之前未会见展示该页面。

通常,我们在html的head标签中上加CSS样式表,这种办法会阻塞渲染,如下所示:

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

当是html页面被网络浏览器加载时,它用从上到下被逐行解析。当浏览器解析到link标签时,它用立即开始下载CSS样式表,在得前未会见渲染页面。

对于一个大型网站,尤其是如以了Bootstrap这种庞大框架的网站,样式表有几百KB,用户须耐心等其全下充斥了才能够来看页面。

那,我们是不是相应拿link标签放到body遭遇,以戒阻塞渲染?你可以这么做,但是阻塞渲染也无是均凭可取,我们实际上可以运用她。如果页面渲染时从没加载任何CSS,我们见面逢丑陋之”内容闪现”。

Bootstrap 3

咱俩怀念使的完美解决方案虽活该是:首屏相关的根本CSS使用阻塞渲染之不二法门加载,所有的无重要CSS在首屏渲染完成后加载。

关键CSS

此是自身所以Webpack和Bootstrap编写的一个大概的网页,
下面的截图是首次渲染后的体。

Bootstrap 4

点击Sign Up today按钮会弹出一个模态框, 模态框弹出时的样式如下:

Bootstrap 5

首不好渲染需要之样式包括导航长达的体、超大屏幕样式、按钮样式、其它布局和书的公用样式。但是我们并不需要模态框的体,因为它们不会见及时在页面被显得。考虑到这些,下面是咱们拆分关键CSS和未关键CSS的也许的计:

critical.css

.nav {
  ...
}

.jumbtron {
  ...
}

.btn {
  ...
}

non_critical.css

.modal {
  ...
}

设若您已经发出是定义,那么您可能会见提出少单疑问:

  1. 我们怎么用程序分别关键CSS和免要CSS?
  2. 怎样吃页面在首不善渲染之前加载关键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打包流程中

本人创建Bootstrap了一个称吧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技术的变现

Bootstrap 6

运分别关键CSS技术的呈现

Bootstrap 7

无独有偶而您所观看底,我的应用程序First Meaningful
paint时间缩短了守1秒,到达可互相状态的流年节约了0.5秒。实际被,你的应用程序可能无法取如此惊人的改进,因为自身之CSS很笨重(我包含了百分之百Bootstrap库),而且在这样一个简便的应用程序中,我从来不众根本CSS规则。

Bootstrap 8

Bootstrap 9

iKcamp原创新书《移动Web前端高效开发实战》已于亚马逊、京东、当当开售。

iKcamp官网:http://www.ikcamp.com

相关文章