设为首页 加入收藏

TOP

翻译 | 关键CSS和Webpack: 减少阻塞渲染的CSS的自动化解决方案(一)
2017-10-11 14:02:26 】 浏览:7484
Tags:翻译 关键 CSS Webpack: 减少 阻塞 渲染 自动化 解决方案


"消除阻塞渲染的CSS和java script"。 这一条Google Page Speed Insights的建议总让我困惑。

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

我们可以做很多事情来减少阻塞渲染的java script,例如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,我们会遇到丑陋的"内容闪现"。

我们想要的完美解决方案就应该是:首屏相关的关键CSS使用阻塞渲染的方式加载,所有的非关键CSS在首屏渲染完成后加载。

关键CSS

这里是我用Webpack和Bootstrap编写的一个简单的网页, 下面的截图是首次渲染后的样式。

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

首次渲染需要的样式包括导航条的样式、超大屏幕样式、按钮样式、其它布局和字体的公用样式。但是我们并不需要模态框的样式,因为它不会立即在页面中显示。考虑到这些,下面是我们拆分关键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/java script" 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文件 */
  pe
首页 上一页 1 2 下一页 尾页 1/2/2
】【打印繁体】【投稿】【收藏】 【推荐】【举报】【评论】 【关闭】 【返回顶部
上一篇【恢复】慕课网《网页布局基础》.. 下一篇01.CSS动画-->transform

评论

帐  号: 密码: (新用户注册)
验 证 码:
表  情:
内  容:

最新文章

热门文章

C 语言

C++基础

windows编程基础

linux编程基础

C/C++面试题目