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

Bootstrap 1


“消除鸿沟渲染的CSS和JavaScript”。 这一条谷歌 Page Speed
Insights的提议总让自己纳闷。

当一个网页被访问时,谷歌希望它仅加载对始发视图有用的内容,并行使空闲时间来加载其余内容。那种方式可以使用户尽可能早地来看页面。

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打包流程中

自家创立了一个名为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

相关文章