Bootstrap 4 “如何改进”；消除渲染阻塞资源”；关于灯塔报告（PWA）？

我在PWA的第一次尝试是：

我正试图在灯塔中获得所有类别的100%：）

例如，我阅读了“了解更多”页面，但不理解如何内联交付引导CSS

---

有什么建议吗？

这意味着什么

“消除渲染块资源”意味着第一个视图（顶部折叠）所需的所有资源（CSS/JS）都应该是html本身的一部分（内联或脚本或样式块）；所有其他CSS/JS（在下面某处使用）都可以转到其他单独的文件

这样，浏览器将能够快速绘制/渲染第一个视图，然后继续加载其他CSS/JS文件

该怎么做

我意识到在bootstrap.css中，我几乎没有使用15%的类。。。您还可能会得到lighthouse中未使用的css类的提示。因此，您可以在HTML中选择性地只包含相关类

JS将更加棘手。接下来，为了使第一个视图功能化，您可以为导航、旋转木马等插入香草Javascript（在HTML中），这比bootstrap.js更好/更快

---

希望对你有帮助。。。祝您好运

您应该只在

标题中加载加载当前“视图”（我特意没有说“页面”）实际需要的CSS和JS。这并不意味着您应该将它们内联。您完全可以从CSS或JS文件加载它们。您应该在
页脚中加载剩余的CSS和JS（这里CSS或JS文件也可以）

在单页应用程序（SPA）也是一个渐进式web应用程序（PWA）的情况下，这只是您的打开/启动屏幕。。。很简单。这应该很容易得到100%的分数。但是，当你谈论一个不清楚“首页”是什么的网站时。。。这几乎成了一项不可能完成的任务。一个聪明的JS或内联CSS解决方案可以做到这一点，但构建起来相当困难

然而，对于网站来说，有一个更简单的解决方案。我写了一篇只关注网站的文章。TLDR：只需省略框架。这可能不是所有情况下的解决方案，但对于那些可能的情况，这无疑是一条可行之路