第十六天 - Mojolicious 之圣诞节前的开胃菜 - 儿童故事

Mon Dec 17, 2018

您刚刚阅读了如何在浏览器中减轻体重，并希望了解减少Mojo应用程序的效果。该过程的一部分是阻止浏览器请求几乎不变的文件。我花了一个充满咖啡因的下午试图用Mojolicious做到这一点。我一直在’围绕房子，扰乱警报我直到最后才找到答案，有点像你最喜欢的圣诞节动画特别与一个小的林地生物叙述“Gruffalo的HTTP标题”。

儿童故事

我们心爱的小型林地生物需要显示一个森林日历，其中包含从数据库中提取的森林事件。Perl 可以获取事件数据并将其打包为JSON feed 流。Mojolicious 可以为每个用户准备具有正确 JSON feed 流的网页。使用一些JavaScript 库来显示 Web 日历，所有这些都可以在森林中使用。

除 JavaScript 库之外的所有内容都是轻量级的。每个人都知道, 如果不是每次都去下载 Javascript, 那么页面重载的速度会更快。那些库几个月都不会改变！如果只有客户端浏览器知道它可以使用上次下载的文件。

当然，秘诀是设置Cache-ControlHTTP 头的字段，但是怎样设置呢？

首先，有一匹马 …… #

每个使用 Apache 的人都会考虑使用 mod_expires ，这看起来很容易，除了 Apache 没有被用来为网页提供服务。

…但是马儿提到了一些甜蜜的 Cache-Control指令可以咀嚼，同时继续在早先下载的一些HTTP缓存页面上吃草。小动物继续前进。

…… 然后有一只蟾蜍 #

森林生物使用 Mojolicious附带的 Hypnotoad Web服务器来为其页面提供服务。他们发现它非常适合他们的树栖生产环境。

所有荣耀都归于Hypnotoad

它可以设置HTTP标头将其转换为反向代理，但是流行的设置是将Hypnotoad 置于 Nginx 或Apache/mod_proxy后面。那些服务器应该让你玩Expires标题。但是蟾蜍没有完全具备这种特殊的啮齿动物所需要的东西。

抛开 - 不，我没有提到 Plack。也许如果我今年好，圣诞老人会告诉我应该如何使用它。可能与某事有关

Plack::Response->header('Expires' => 'Tue, 25 Dec 2018 07:28:00 GMT');

但我不知道，我的叙述者也没有。

…… 然后有一个独角兽 #

嗯，这很容易。只需使用标准的 Mojo::Headers 模块来设置Expires标头。

可是等等！这为一个不是那么大的页面设置了它。我们毛茸茸的朋友只想阻止 JavaScript 文件每次都重新加载，这会破坏 Sciuridae 的移动体验。Hmmmm。

…… 然后有一只犀牛 #

JavaScript犀牛图像

如果 JavaScript 存在于<head>标记中，则在下载脚本之前不会解析页面正文。有些人通过将脚本放在结束</body>标记之前来解决这个问题，但 JS 仍然需要下载。有几个属性隐藏在灌木丛中。Async 和 defer告诉浏览器在下载 JavaScript 时继续解析HTML。这两个聪明的猫头鹰可以帮助决定使用哪一个。

告诉您的脚本在模板中带有此标记助手的主页面后加载

%= javascript '/js/lib/jquery.min.js', defer => undef

这个产生

<script defer src="/path/to/script.js"></script>

如果你想要它在 <head> 里，你必须把它放在你的布局中，否则模板会替你做。

……最后，有个戴帽子的 男人 #

吕克迪德里的重头戏

“但是 JavaScript 需要加载 FIRST！”，喋喋不休地说道。

叹息 - 这真的是一个苛刻的松鼠小球藻。

嗯……这是圣诞节，但是你需要安装去年由Luc Didry为你编写的 StaticCache插件。它为Mojolicious提供的所有静态文件设置标头。使用目录中的 nut.js和 nut.css 文件（当然适当缩小），它们只应下载一次并使用缓存版本直到它过期。默认的 max-age 是30天，如果你想要，你甚至可以在开发过程中用 ``even_in_dev => 1` 缓存。

森林里的喜鹊用3个JavaScript库，3个CSS文件和4个logo弄乱了日历。当然，最大和最闪亮的只有66 kB，整个系列只有微不足道的164 kB，但带宽在荒野中是宝贵的。在使用StaticCache插件之前，日历在Google的PageSpeed Insights上评分为 92。

加载了StaticCache插件

sub startup {
    my $self = shift;

    $self->plugin('StaticCache' => { even_in_dev => 1 });
    ...
}

页面速度现在是 93 !!!! 哇！这个更快！ Nutgel Tufty-tail 说，森林里的每个人都欢呼。

而这，亲爱的读者，是松鼠学会了如何储藏坚果过冬……在高速缓存中。晚安，小孩，好梦。

自己试试吧 #

Firefox，Chrome和Opera 的浏览器卡路里插件将您网页的文件大小分解为一个很好的小交通灯报告，根据用户可配置的限制来衡量 HTML，图像，CSS，JavaScript 和页面的其他部分是可以接受的

谷歌的PageSpeed Insights 衡量手机和桌面的性能。

希望，以叙事方式写作的越来越尴尬的尝试并没有妨碍一两个新想法。如果我错过了什么，请告诉我。