使用 SCSS 和 Webpack 的大型样式 sheet 的最佳实践
Best practice for large style sheet using SCSS and Webpack
我目前正在努力改进我们的公司网站优化，main.css。
我目前的 SCSS 设置是 webpack 处理编译的-7-1-pattern，缩小后最终的main.css是286.2KB .
这会降低移动网站的速度，并使我们在移动设备上的 PageSpeed Insights 得分很低，为 56（桌面设备为 97）
影响我们在移动设备上得分的最大因素是 消除渲染阻塞资源 main.css.
我有一些 SCSS 部分仅在某些页面上使用，但全部依次在 main.scss 中 @imported然后所有都在 main.css
问题
这里的最佳实践是什么，将 @imports 拆分为 1 个以上的 .scss 文件依次有多个 .css 文件并且只调用 .css 文件在被请求的页面上需要，还是有更好的处理方法？
将您的 CSS 分成多个 CSS 文件并仅加载特定页面所需的 CSS 文件可能会比使用一个通用 [=19] 提供更好的性能=] 文件。浏览器在完成下载和解析 sylesheet 之前无法呈现页面 - 因此加载较少千字节的 CSS 通常有利于性能。
如果您发现删除仅在某些页面上使用的部分不会显着改变 main.css 的大小，请检查您是否在 CSS 中内联任何大型资源。将这些资源从样式表中移出到 <img> 标签（或类似标签）也将有助于提高性能。
如果仍然没有帮助，removing unused CSS and deferring non-critical CSS 将进一步优化以进行研究。
我目前正在努力改进我们的公司网站优化，main.css。
我目前的 SCSS 设置是 webpack 处理编译的-7-1-pattern，缩小后最终的main.css是286.2KB .
这会降低移动网站的速度，并使我们在移动设备上的 PageSpeed Insights 得分很低，为 56（桌面设备为 97）
影响我们在移动设备上得分的最大因素是 消除渲染阻塞资源 main.css.
我有一些 SCSS 部分仅在某些页面上使用，但全部依次在 main.scss 中 @imported然后所有都在 main.css
问题
这里的最佳实践是什么，将 @imports 拆分为 1 个以上的 .scss 文件依次有多个 .css 文件并且只调用 .css 文件在被请求的页面上需要，还是有更好的处理方法？
将您的 CSS 分成多个 CSS 文件并仅加载特定页面所需的 CSS 文件可能会比使用一个通用 [=19] 提供更好的性能=] 文件。浏览器在完成下载和解析 sylesheet 之前无法呈现页面 - 因此加载较少千字节的 CSS 通常有利于性能。
如果您发现删除仅在某些页面上使用的部分不会显着改变 main.css 的大小，请检查您是否在 CSS 中内联任何大型资源。将这些资源从样式表中移出到 <img> 标签（或类似标签）也将有助于提高性能。
如果仍然没有帮助，removing unused CSS and deferring non-critical CSS 将进一步优化以进行研究。