0

我目前正在使用大型 main.css 改进我们的公司网站优化。

我当前的 SCSS 设置是使用 Webpack 处理编译的-7-1-模式，最终的main.css 在 Minification后为 286.2KB。

这会减慢移动网站的速度，并使我们在移动设备上的 PageSpeed Insights 得分很差，为 56（桌面 97）

影响我们在移动设备上得分的最大因素是消除main.css上的渲染阻塞资源。

我有一些仅在某些页面上使用的 SCSS 部分，但所有部分都在 main.scss 中@imported依次全部在main.css

问题

这里的最佳做法是什么，将@imports 拆分为超过 1 个 .scss 文件，依次有多个 .css 文件，并且只调用被请求页面上需要的 .css 文件，或者有更好的处理方法吗？

4

1 回答 1

1

将您的 CSS 分解为多个 CSS 文件并仅加载特定页面所需的 CSS 文件可能会比拥有一个通用 CSS 文件提供更好的性能。浏览器在完成下载和解析样式表之前无法呈现页面 - 因此加载较少千字节的 CSS 通常有利于性能。

如果您发现删除仅在某些页面上使用的部分不会显着改变 main.css 的大小，请检查您是否在 CSS 中内联了任何大型资源。将这些资源从样式表移到<img>标签（或类似的）也将有助于提高性能。

如果这仍然没有帮助，删除未使用的 CSS并推迟非关键 CSS将是进一步优化研究。

于 2022-02-18T16:53:12.433 回答