Brian F爱
向一位来自Portlandyobet英雄联盟的谷歌开发专家学习Angular、Web技术和Node.js。
广告 ·ultimatecourses.com
用终极课程学习Angular的正确方法

使用node.js生成关键路径CSS

在此帖子中,我将向您展示如何生成关键路径CSS以避免渲染阻止JavaScript和CSS。

如果您曾经使用过您的网站使用yobet英雄联盟Google Pagespeed见解工具您可能会出错表示:

yobet英雄联盟Google Pagespeed得分

在上面的内容中消除阻断租用者的JavaScript (JS)和CSS

那是什么意思?

嗯,这意味着有js文件或css文件,它阻止了页面的渲染。当用户在网站上请求页面时,第一个请求会导致HTML源。浏览器解析该文件,然后针对每个外部脚本和外部样式表,它发出请求,等待和解析响应。并且,这一切都会发生在浏览器将完成向用户的页面呈现之前。

虽然这对你来说可能不是什么大事,但对谷歌来说却是。yobet英雄联盟

关键路径

关键路径表示在向用户呈现页面之前浏览器所采用的步骤。我们的目标是最大限度地减少步骤数量。

一种方法是在我们显示(呈现)页面之后异步加载任何外部CSS样式表。这样,下载和解析CSS的任务就会关闭,直到用户看到我们的页面。

但是,当我们异步加载外部CSS时,我们不想首先显示一个无样式的页面。对?

所以,我们能做的就是这样:

  1. 异步加载外部CSS以防止租用者阻塞。
  2. 确定以上折叠内容所需的“关键”CSS。
  3. 内联CSS,或者把它放在一个<时尚>标记在<头>

我将使用由编写的node.js模块乔纳斯欧胜叫顶层屋。有趣的名字。但是,这是一个很棒的工具。

图像显示网页的折叠

生成关键的路径

使用Node.js模块,有一种自动生成网站页面关键路径CSS的方法阁楼。根据这一点项目的GitHub页面

PENTHOUSE是一个用于为您的网页和Web应用程序生成关键路径CSS的工具,以便加快页面呈现。使用您的网站的完整CSS提供工具,以及您要创建关键CSS的页面,它将返回呈现上述页面折叠内容所需的所有CSS。

作为侧面笔记,您还可以使用PENTHOUSE作为GRURT构建的一部分或使用免费在线工具

让我们走过这个设置:

  1. 首先,我们将为此创建一个节点.js脚本。
  2. 接下来,我们将通过需要必要的节点模块并创建将返回承诺对象的Main()函数来获取脚本的骨骼。
  3. 然后,我们将为单个URL生成关键路径CSS。

下面是我将在本文中使用的文件夹结构的一个快速屏幕截图:

示例应用程序文件夹结构

创建node.js脚本

第一步是创建一个Node.js脚本。这很简单。首先,让我们创建文件并启用文件的执行。

$MKDIR.班$光盘班$触摸生成.js $修改文件权限+ x生成.js.

现在,让我们在文件顶部添加以下Shebang:

!!/usr//env节点

就是这样。现在我们可以开始编写脚本了。

要设置

第一步是安装并需要阁楼节点模块。我将假设您已经安装了包含的Node.js和节点包管理器(NPM)。

$NPM.安装阁楼 -  Save-Dev

而且,现在让我们要求模块生成.js.文件。

//要求顶层屋包生成关键的CSS路径const问:=要求'Q';

我会使用承诺Q节点模块在我的脚本。这将使我们能够跟踪流程何时完成,何时可以安全退出。如果你不熟悉承诺,你应该退出promisejs.org.

$NPM.安装问——save-dev
//要求顶层屋包生成关键的CSS路径const问:=要求'Q';

接下来,我们需要路径FS.(文件系统)节点模块。而且,我们还将定义一些常数。第一__Basedir.将是我在内部执行脚本的当前目录。该__baseOutput常量将是到目标目录的完整路径。对于我的项目,我有一个css/关键文件夹,我将存储文件。

您可以问自己 - 如果您在.css文件中存储关键路径CSS - 那是什么优势?好吧,我要将完整的实现留给您和您的Web应用程序层以读取关键CSS文件,并ulify并将其放在一个<时尚>标记在你的<头>。这超出了本文的范围。

最后,我们将为我们的Penthouse请求设置默认配置。配置对象基于宾馆节点模块的文档。

/ /需要图书馆const路径=要求'路径';constFS.=要求“fs”;const__Basedir.='./';const__baseOutput=路径解决__Basedir.'CSS / CRISON';const__BaseURL.=“//www.nxtmastery.com/”;//阁楼的默认配置var配置={CSS.路径解决__Basedir.'css / build / app.css'高度900严格超时30000宽度1300};

生成关键路径CSS

随着您应该安装的方式问:阁楼模块通过NPM,以及您的生成.js.文件应该如下所示:

!!/usr//env节点//需要penthouse包生成关键路径cssconst问:=要求'Q';//需要penthouse包生成关键路径cssconst阁楼=要求'阁楼';/ /需要图书馆const路径=要求'路径';constFS.=要求“fs”;const__Basedir.='./';const__baseOutput=路径解决__Basedir.'CSS / CRISON';const__BaseURL.=“//www.nxtmastery.com/”;//阁楼的默认配置var配置={CSS.路径解决__Basedir.'css / build / app.css'高度900严格超时30000宽度1300};

我们现在可以开始编码我们的主要函数,该函数将由Node.js执行。我喜欢使用main ()C. My大会main ()函数将返回一个promise对象。这是我的骨架main ()功能与代码一起调用它。

/ ** *执行* * @method main * @return {prosise} promise对象* /var主要=函数{/ /实现在这里控制台日志'foo';//这只是骨架,当我们充实实现时,您会想要删除它返回问:;};//我们开始做吧!如果要求主要===.模块{主要然后函数{过程退出0.;}抓住函数错误{控制台日志错误;过程退出1;};}

main ()写入的方法我们可以通过在命令行执行它来测试它。

$ ./js/bin/generate.js.

您应该会看到一个简单的“foo”消息,node.js进程应该会成功退出。

图像显示网页的折叠

请注意,我们将删除代码中所有的伪代码main ()在添加实现代码之前的方法。

对于我们的实现,我们要做的第一件事是创建一个简单的功能,用于为URL生成关键路径CSS。该函数应接受两个参数:

  1. url- 请求的URL
  2. 输出-完整的路径到css的关键路径输出

让我们命名这个功能generateCriticalCss ()。它应该返回一个promise对象,该对象在调用penthouse回调函数而没有错误时解析,如果错误参数不是null(根据penthouse文档)则被拒绝。

/ ** *生成关键的CSS * * @method generateCriticalcss * @param url {string}要检索的URL * @param输出{string}文件路径将css输出到* @return {prosise} promise对象* /vargeneratecriticalcs.=函数url输出{//创建承诺var递延=问:推迟;//配置URL.配置url=url;/ /执行《阁楼》的要求阁楼配置函数错误criticalCss{//检查错误如果错误{/ /日志控制台错误错误;//拒绝承诺返回递延拒绝错误错误;}/ /日志控制台日志关键路径css保存到:%s。输出;//将关键CSS写入输出文件FS.writeFileSync输出criticalCss;//解决承诺递延解决1;};返回递延诺言;};

好,现在我们已经定义了处理方法,让我们继续main ()功能。首先,让我们确保输出目录存在。

//确保存在基本输出目录如果!!FS.existsSync__baseOutput{FS.mkdirsync.__baseOutput;控制台日志'创建输出目录:%s'__baseOutput;}

我们终于准备好调用generateCriticalCss ()方法创建索引页的关键路径CSS。我将把输出存储在css/critical/index.css中。

var输出=路径解决__baseOutput“index.css”;返回generatecriticalcs.__BaseURL.输出;

完整的生成.js文件现在应该如下所示:

!!/usr//env节点//要求顶层屋包生成关键的CSS路径const问:=要求'Q';//要求顶层屋包生成关键的CSS路径const阁楼=要求'阁楼';/ /需要图书馆const路径=要求'路径';constFS.=要求“fs”;const__Basedir.='./';const__baseOutput=路径解决__Basedir.'CSS / CRISON';const__BaseURL.=“//www.nxtmastery.com/”;//阁楼的默认配置var配置={CSS.路径解决__Basedir.'css / build / app.css'高度900严格超时30000宽度1300};//允许许多事件监听器过程setMaxListeners0.;/ ** *执行* * @method main * @return {prosise} promise对象* /var主要=函数{/ ** *生成关键的CSS * * @method generateCriticalcss * @param url {string}要检索的URL * @param输出{string}文件路径将css输出到* @return {prosise} promise对象* /vargeneratecriticalcs.=函数url输出{//创建承诺var递延=问:推迟;//配置URL.配置url=url;/ /执行《阁楼》的要求阁楼配置函数错误criticalCss{//检查错误如果错误{/ /日志控制台错误错误;//拒绝承诺返回递延拒绝错误错误;}/ /日志控制台日志关键路径css保存到:%s。输出;//将关键CSS写入输出文件FS.writeFileSync输出criticalCss;//解决承诺递延解决1;};返回递延诺言;};//确保存在基本输出目录如果!!FS.existsSync__baseOutput{FS.mkdirsync.__baseOutput;控制台日志'创建输出目录:%s'__baseOutput;}var输出=路径解决__baseOutput“index.css”;返回generatecriticalcs.__BaseURL.输出;};//我们开始做吧!如果要求主要===.模块{/ / main ();主要然后函数{过程退出0.;}抓住函数错误{控制台日志错误;过程退出1;};}

虽然此示例仅显示了您在网站上的单个页面中的关键路径CSS时如何生成关键路径CSS,但您可以轻松扩展它以动态生成完整网站的关键CSS。在您的Google Pagespeed Insights分数中达到100/100的yobet英雄联盟好运!

Brian F爱

嗨,我是布莱恩。我对TypeScript, Angular和Node.js感兴趣。我和我最好的朋友邦妮结婚了,我住在波特兰,我经常滑雪。