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

Node.js 1


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

当三个网页被访问时,谷歌希望它仅加载对始发视图有用的始末,并行使空闲时间来加载其余剧情。那种艺术能够使用户尽也许早地看来页面。

Node.js 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,大家会赶上丑陋的”内容闪现”。

Node.js 3

我们想要的健全消除方案就应有是:首屏相关的要害CSS使用阻塞渲染的章程加载,全部的非关键CSS在首屏渲染实现后加载。

关键CSS

此间是自己用Webpack和Bootstrap编写的三个简单易行的网页,
下边包车型的士截图是第一遍渲染后的体裁。

Node.js 4

点击Sign Up today按钮会弹出二个模态框, 模态框弹出时的体裁如下:

Node.js 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
奥斯曼i的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>

它还将出口1个新的CSS文件,例如style.96106fab.css(文件自动Hash命名)。这么些CSS文件与原来样式表相同,只是不含有关键CSS。

内联嵌加入关贸总协定社团键CSS样式

您会注意到,关键CSS已经停放到文书档案的头顶。那是极品的,因为页面不必从服务器加载它。

预加载非关键CSS

您还会专注到,非关键CSS使用了3个看起来更复杂的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打包流程中

自己成立了1个名为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技术的突显

Node.js 6

行使分别关键CSS技术的展现

Node.js 7

正如你所观察的,小编的利用程序First Meaningful
paint时间缩小了临近1秒,到达可相互状态的小时节省了0.5秒。实际中,你的应用程序恐怕不能够赢得那样惊人的改进,因为自己的CSS很笨重(作者包罗了整整Bootstrap库),而且在如此五个粗略的应用程序中,作者没有过多关键CSS规则。

Node.js 8

Node.js 9

iKcamp原立异书《移动Web前端高效开发实战》已在亚马逊(亚马逊(Amazon))、京东、当当开售。

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