开发者社区> 反向一觉> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

关键CSS和Webpack: 减少阻塞渲染的CSS的自动化解决方案

简介:
+关注继续查看

关键CSS和Webpack: 减少阻塞渲染的CSS的自动化解决方案

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

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

我们可以做很多事情来减少阻塞渲染的JavaScript,例如code splitting、tree shaking,缓存等。

但是如何减少阻塞渲染的CSS?为此,可以拆分并优先加载首次渲染所需要的CSS(关键CSS),然后再加载其它CSS。

可以通过编程的方式筛选出关键CSS,在本文中,我将向你展示如何通过Webpack的自动化流程来实现该方案。

什么是阻塞渲染

如果资源是“阻塞渲染”的,则表示浏览器在资源下载或处理完成之前不会显示该页面。

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


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

当这个html页面被网络浏览器加载时,它将从上到下被逐行解析。当浏览器解析到link标签时,它将立即开始下载CSS样式表,在完成之前不会渲染页面。

对于一个大型网站,尤其是像使用了Bootstrap这种庞大框架的网站,样式表有几百KB,用户必须耐心等待其完全下载完才能看到页面。

那么,我们是否应该把link标签放到body中,以防止阻塞渲染?你可以这么做,但是阻塞渲染也不是全无优点,我们实际上可以利用它。如果页面渲染时没有加载任何CSS,我们会遇到丑陋的"内容闪现"。

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

关键CSS

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

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

首次渲染需要的样式包括导航条的样式、超大屏幕样式、按钮样式、其它布局和字体的公用样式。但是我们并不需要模态框的样式,因为它不会立即在页面中显示。考虑到这些,下面是我们拆分关键CSS和非关键CSS的可能的方式:

critical.css


  1. .nav { 
  2.   ... 
  3.  
  4. .jumbtron { 
  5.   ... 
  6.  
  7. .btn { 
  8.   ... 
  9.  

non_critical.css


  1. .modal { 
  2.   ... 
  3.  

如果你已经有这个概念,那么你可能会提出两个疑问:

  1. 我们如何用程序区分关键CSS和非关键CSS?
  2. 如何让页面在首次渲染之前加载关键CSS,之后加载非关键CSS?

示例项目

我将简要介绍一下这个项目的基本配置,这样我们在遇到解决方案时,方便快速消化。

首先, 在入口文件中引入Bootsrap SASS。

main.js


  1. require("bootstrap-sass/assets/stylesheets/_bootstrap.scss"); 

我使用sass-loader来处理sass,与Extract Text Plugin一起使用,将编译出来的css放到单独的文件中。

使用HTML Webpack Plugin来创建一个HTML文件,它引入编译后的CSS。这在我们的解决方案中是必需的,你马上就会看到。

webpack.config.js


  1. module.exports = { 
  2.   module: { 
  3.     rules: [ 
  4.       { 
  5.         test: /\.scss$/, 
  6.         use: ExtractTextPlugin.extract({ 
  7.           fallback: 'style-loader'
  8.           use: ['css-loader''sass-loader'
  9.         }) 
  10.       }, 
  11.       ... 
  12.     ] 
  13.   }, 
  14.   ... 
  15.   plugins: [ 
  16.     new ExtractTextPlugin({ filename: 'style.css' }), 
  17.     new HtmlWebpackPlugin({ 
  18.       filename: 'index.html'
  19.       template: 'index.html'
  20.       inject: true 
  21.     }) 
  22.   ]  
  23. };  

运行构建之后,这里是HTML文件的样子。请注意,CSS文件在head标签里引入,因此将会阻塞渲染。

index.html


  1. <!DOCTYPE html> 
  2. <html lang="en"
  3. <head> 
  4.     <meta charset="utf-8"
  5.     <meta name="viewport" content="width=device-width,initial-scale=1"
  6.     <title>vuestrap-code-split</title> 
  7.     <link href="/style.css" rel="stylesheet"
  8. </head> 
  9. <body> 
  10.   <!--App content goes here, omitted for brevity.--> 
  11.   <script type="text/javascript" src="/build_main.js"></script> 
  12. </body> 
  13. </html>  

编程识别关键CSS

手动区分关键CSS维护起来会非常痛苦。以编程方式来实现的话,我们可以使用Addy Osmani的Critical。这是一个Node.js模块,它将读入HTML文档,并识别关键CSS。Critical能做的还不止这些,你很快就能体会到。

Critical识别关键CSS的方式如下:指定屏幕尺寸并使用PhantomJS加载页面,提取在渲染页面中用到的所有CSS规则。

以下为对项目的设置:


  1. const critical = require("critical"); 
  2.  
  3. critical.generate({ 
  4.    
  5.   /* Webpack打包输出的路径 */ 
  6.   base: path.join(path.resolve(__dirname), 'dist/'), 
  7.   src: 'index.html'
  8.   dest: 'index.html'
  9.   inline: true
  10.   extract: true
  11.  
  12.   /* iPhone6的尺寸,你可以按需要修改 */ 
  13.   width: 375, 
  14.   height: 565, 
  15.    
  16.   /* 确保调用打包后的JS文件 */ 
  17.   penthouse: { 
  18.     blockJSRequests: false
  19.   } 
  20. });  

执行时,会将Webpack打包输出文件中HTML更新为:


  1. <!DOCTYPE html> 
  2. <html lang="en"
  3. <head> 
  4.   <meta charset="utf-8"
  5.   <meta name="viewport" content="width=device-width,initial-scale=1"
  6.   <title>Bootstrap Critical</title> 
  7.   <style type="text/css"
  8.     /* 关键CSS通过内部样式表方式引入 */ 
  9.     body { 
  10.       font-family: Helvetica Neue,Helvetica,Arial,sans-serif; 
  11.       font-size: 14px; 
  12.       line-height: 1.42857; 
  13.       color: #333; 
  14.       background-color: #fff; 
  15.     } 
  16.     ... 
  17.   </style> 
  18.   <link href="/style.96106fab.css" rel="preload" as="style" onload="this.rel='stylesheet'"
  19.   <noscript> 
  20.       <link href="/style.96106fab.css" rel="stylesheet"
  21.   </noscript> 
  22.   <script> 
  23.     /*用来加载非关键CSS的脚本*/ 
  24.   </script> 
  25. </head> 
  26. <body> 
  27.   <!-- 这里是App的内容 --> 
  28.   <script type="text/javascript" src="/build_main.js"></script> 
  29. </body> 
  30. </html>  

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

内联嵌入关键CSS样式

你会注意到,关键CSS已经嵌入到文档的头部。这是最佳的,因为页面不必从服务器加载它。

预加载非关键CSS

你还会注意到,非关键CSS使用了一个看起来更复杂的link标签来加载。rel="preload"通知浏览器开始获取非关键CSS以供之后用。其关键在于,preload不阻塞渲染,无论资源是否加载完成,浏览器都会接着绘制页面。

link标签中的onload属性允许我们在非关键CSS加载完成时运行脚本。Critical模块可以自动将此脚本嵌入到文档中,这种方式提供了将非关键CSS加载到页面中的跨浏览器兼容方法。


  1. <link href="/style.96106fab.css" rel="preload" as="style" onload="this.rel='stylesheet'"

把Critical组件添加到webpack打包流程中

我创建了一个名为HTML Critical Webpack Plugin的插件,该插件仅仅是Critical模块的封装。它将在HTML Webpack Plugin输出文件后运行。

你可以在Webpack的项目中这样引入:


  1. const HtmlCriticalPlugin = require("html-critical-webpack-plugin"); 
  2.  
  3. module.export = { 
  4.   ... 
  5.   plugins: [ 
  6.     new HtmlWebpackPlugin({ ... }), 
  7.     new ExtractTextPlugin({ ... }), 
  8.     new HtmlCriticalPlugin({ 
  9.       base: path.join(path.resolve(__dirname), 'dist/'), 
  10.       src: 'index.html'
  11.       dest: 'index.html'
  12.       inline: true
  13.       minify: true
  14.       extract: true
  15.       width: 375, 
  16.       height: 565, 
  17.       penthouse: { 
  18.         blockJSRequests: false
  19.       } 
  20.     }) 
  21.   ]  
  22. };  

注意:你应该只在生产版本中使用,因为它将使你的开发环境的构建很慢

表现结果

现在已经抽离了关键CSS,并且把非关键CSS的加载放到空闲时间,这在性能方面会有怎样的提升呢?

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

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

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

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


原文发布时间为:2017-10-11

本文作者:iKcamp

本文来自云栖社区合作伙伴“51CTO”,了解相关信息可以关注。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
前端技术—webpack 打包 css 文件 | 学习笔记
简介:快速学习前端技术— webpack 打包 css 文件
0 0
Webpack(3): 使用 loader 处理 CSS
上文讲解了 webpack 的简单配置和配置文件的使用,初步实现模块化的打包构建工作。本文将以在 webpack 中处理 css 样式文件为例,演示 loader 的使用。
0 0
Webpack打包CSS文件
Webpack打包CSS文件
0 0
零基础学习Webpack—02(Webpack打包CSS/Less样式资源)
零基础学习Webpack—02(Webpack打包CSS/Less样式资源)
0 0
Webpack轻松入门(二)——CSS打包
上一节讲到如何使用Webpack实现最基础的打包功能,但是发现以下几个比较突出的问题: ① 我们只打包了一个JS文件,多个文件该如何打包? ② CSS样式该如何打包? ③ 每次写完代码想要看运行结果都需要手动输命令打包,反而降低了开发效率 没关系,本文就是为解决这些问题而来的。
769 0
webpack和webpack-simple区别(如何引入css文件)
博主最近研究vue+webpack的时候想引入css文件死活引入不出来,在webpack-simple那里却能引得出来,十分的纳闷,然后细心的调试了一下,原来这webpack和webpack-simple两个东西引入css文件有点区别。
604 0
Webpack 2 视频教程 012 - 理解Webpack 中的 CSS 作用域与 CSS Modules
原文发表于我的技术博客 这是我免费发布的高质量超清「Webpack 2 视频教程」。 Webpack 作为目前前端开发必备的框架,Webpack 发布了 2.0 版本,此视频就是基于 2.0 的版本讲解的。
834 0
webpack指南-webpack介绍-代码分割 - CSS
要使用webpack打包CSS,像其他任一模块一样将CSS代码导入到你的JS代码中,然后使用css-loader(将CSS输出为JS模块),再选择性地使用ExtrackTextWebpackPlugin(提取打包的CSS并输出CSS文件)。
655 0
+关注
文章
问答
文章排行榜
最热
最新
相关电子书
更多
F2etest — 多浏览器兼容性测试整体解决方案
立即下载
基于webpack和npm的前端组件化实践
立即下载
零基础CSS入门教程
立即下载