css - 在网站的不同部分将 CSS 文件组合成缩小的 "chunks"是否明智?

标签 css performance optimization minify

假设您经营着一个非常大的电子商务网站,每天有数百万的页面浏览量。

显然您想缩小和合并您的 css 文件以减少请求,但您真的想将整个站点合并到一个文件中吗?好处是一旦那个大的 css 文件被缓存,其余页面将快速运行,但第一个文件是一个野兽。而且您很可能有数百行未使用的 css。

将它分成 block 会不会更好,这样你会得到类似这样的东西:

全局和主页

全局和产品结帐

额外功能/信息页面上的全局和功能

当然,您需要加载 3 个不同的文件,但这些文件较小。主页加载速度很快,如果您直接结帐,您可能永远不需要功能文件。

最佳答案

因此,将 css 文件分成不同的部分并根据部分每页加载 2 个 css 文件似乎是明智的。

这是来自 CSS 技巧的示例:http://css-tricks.com/one-two-three/

Global = main.css + grid.css + typography.css + buttons.css + print.css
Site section A = tabs.css + editor.css
Site section B = forms.css + video.css + details.css

该系统有助于减少加载到每个页面上的未使用 CSS 的数量,利用缓存,并确保访问者首先访问的页面能够快速加载。

关于css - 在网站的不同部分将 CSS 文件组合成缩小的 "chunks"是否明智?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26875986/

相关文章:

javascript - slider 未正确加载

javascript - 同一行两端的不同字体大小的文本

javascript - 使用多个复选框过滤具有数据属性的 div

html - 我不能在 CSS 代码中添加背景

jQuery IE6 困境 : animate scrollLeft or left?

performance - 新项目 Python 3x PostgreSQL 9x 和 pg8000 1x DBAPI?

ios - 从给定值的字典中删除键

php - mysql(查询) 或 php switch 语句哪个更快?

javascript - 我怎样才能让这个重复的 jQuery 变得不那么重复呢?

optimization - Tensorflow 的超参数调整