3

我的目标是消除网站上的渲染阻塞 CSS 和 JS。

Google 建议通过覆盖来识别使用的 CSS/JS，并将该代码从阻止渲染的 URL 移动到 HTML 页面中的内联脚本标记。当页面加载时，它将拥有处理页面核心功能所需的东西。

例如对于核心 CSS：

<style type="text/css"></style>

然后可以通过预加载异步加载 CSS 的其余部分。

<link rel="preload" href="non-core-styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="non-core-styles.css"></noscript>

我遇到了可以删除未使用的 css 的 Purgecss。

purgecss --css bootstrap-grid.min.css --content index.html --out dist/

但我更愿意提取未使用的 CSS，以便通过如上所述的预加载异步加载它们，以避免网站本身出现任何问题。

请问如何使用 Purgecss 或任何其他工具来实现这一点？

javascript也是如此。核心可以这样加载：

<script src="app.js"></script>

虽然可以像这样异步加载非关键部分：

<script src="app.js" async></script>

但是有没有一种工具可以从我的网站中提取未使用的 JS 呢？

谢谢

4

1 回答 1

0

查看https://github.com/pocketjoso/penthouse以提取页面的“关键”CSS，然后将其放入您的<style type="text/css"></style>标签中。

我建议您通过链接标签将所有CSS 包含在 CSS 文件中。这意味着它在每个页面上都是相同的，并且可以被浏览器缓存。

于 2022-01-24T09:53:15.213 回答