翻译 | 关键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,
      }
    })
  ] 
};
复制代码

注意：你应该只在生产版本中使用，由于它将使你的开发环境的构建很慢

表现结果

如今已经抽离了关键CSS，而且把非关键CSS的加载放到空闲时间，这在性能方面会有怎样的提高呢?

我使用Chrome的Lighthouse扩展插件进行测试。请记住，咱们尝试优化的指标是“首次有效绘制”，也就是用户须要多久才能看到真正可浏览的页面。

不使用区分关键CSS技术的表现

使用区分关键CSS技术的表现

正如你所看到的，个人应用程序First Meaningful paint时间缩短了将近1秒，到达可交互状态的时间节省了0.5秒。实际中，你的应用程序可能没法得到如此惊人的改善，由于个人CSS很笨重（我包含了整个Bootstrap库），并且在这样一个简单的应用程序中，我没有不少关键CSS规则。

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

iKcamp官网：www.ikcamp.com

2019年，iKcamp原创新书《Koa与Node.js开发实战》已在京东、天猫、亚马逊、当当开售啦！