CSS后处理器将文件分成两半

Question

我的网站中有一个很大的 CSS 文件，我想将它分成两等份，以便它可以并行加载并让页面更早呈现。当我手动将文件切成两半时似乎可以正常工作，但我希望能够将其作为构建过程的一部分。

有什么工具可以把一个css文件一分为二吗？

我找到了类似的工具，但不完全是我需要的……http://cssnano.co、https://github.com/postcss/postcss和https://www.npmjs.com/package/grunt-split-styles（最后一个几乎完美，但是如何找到中心点……？）

---

编辑：第一次努力...

没有找到完全符合我要求的东西，我开始尝试适应一些接近的东西，对https://github.com/project-collins/grunt-csssplit 做了一个小改动......

diff --git a/lib/splitter.js b/lib/splitter.js
index 81d427c..041cf77 100644
--- a/lib/splitter.js
+++ b/lib/splitter.js
@@ -82,8 +82,9 @@ Splitter.prototype._toPages = function (ast, maxSelectors) {
     pages.push(clone);

     var selectorsForThisPage = 0;
-    ast.stylesheet.rules.forEach(function (rule) {
-        if (selectorsForThisPage + rule.totalSelectors <= maxSelectors) {
+
+    ast.stylesheet.rules.forEach(function (rule, i) {
+        if (Math.round(ast.stylesheet.rules.length/2) !== i) {
             selectorsForThisPage += rule.totalSelectors;
             clone.stylesheet.rules.push(rule);
         }

我可以将我的原始 css 文件一分为二，将一半的规则放在第一部分，一半放在第二部分......

➜  grunt-csssplit git:(master) ✗ grunt csssplit && ls -ltrah
Running "csssplit:your_target" (csssplit) task
File "dest_part_1" created.
File "dest_part_2" created.

Done, without errors.
...
-rw-r--r--   1 moon  staff    96K  6 Oct 09:28 dest_part_2
-rw-r--r--   1 moon  staff    98K  6 Oct 09:28 dest_part_1
➜  grunt-csssplit git:(master) ✗ gzip dest_part_*
➜  grunt-csssplit git:(master) ✗ ls -ltrah
...
-rw-r--r--   1 moon  staff    12K  5 Oct 16:56 dest_part_1.gz
-rw-r--r--   1 moon  staff    18K  6 Oct 09:28 dest_part_2.gz
➜  grunt-csssplit git:(master) ✗ 

在 gzip 之前，文件大小相似，但在 zip 之后，第一部分和第二部分之间存在显着差异。我真的需要 gzip 之后这两个部分的大小相当，以便平衡网络流量。

1. 如何在 在 gzip 之后将 css 文件分成相等的部分？
2. 我觉得我可能搞错了 - 有没有更好的方法？
3. 将我的 css 文件分成两半可使屏幕上的文本可读性提高 50%，这似乎效果很好。为了并行加载而拆分有什么缺点吗？互联网上的大多数信息都指向合并 css 文件以减少网络请求。

Answer 1

如果您正在寻找性能提升，请完全不要手动拆分您的 CSS 文件。出于性能原因，您所看到的 HTTP 请求最少的情况是正确的。

您真正想要做的是确定您的关键路径 CSS（check this CSS Tricks article out 作为背景）并将其内联以在您页面的其余部分 CSS 之前加载。

grunt critical 插件试图做到这一点。这是您必须包含的示例 grunt 任务：

critical: {
    test: {
        options: {
            base: './',
            css: [
                'test/fixture/styles/main.css',
                'test/fixture/styles/bootstrap.css'
            ],
            width: 320,
            height: 70
        },
        src: 'test/fixture/index.html',
        dest: 'test/generated/index-critical.html'
    }
}

这个实用程序非常酷 - 如果您将dest 文件定义为 HTML，它会自动为您创建内联 CSS 并将其放入相应的文件中。

如果您尝试在节点项目上执行此操作，另一个要考虑的选项是 Critical Node.js plugin。