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压缩的文件大小都差不多，但是荏苒，后有是第一部分和第二部分之间的重大差异。我真的需要这两部分在gzip之后大小相当，以便平衡网络流量。

1. 我该如何去分割css文件分成相等的部分后 gzip的？
2. 我觉得我可能会把这全部弄错 - 有没有更好的办法？
3. 将我的css文件分成两半，可以在屏幕上快速读取文本50％，这似乎很好。为了并行加载而分裂有什么缺点？互联网上的大多数信息都指出，将css文件组合起来可以减少网络请求。

Answer 1

如果您正在寻找性能提升，请不要随意手动分割您的CSS文件。你所看到的有关性能方面最少的HTTP请求是真实的。

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

grunt critical插件试图做到这一点。这是你必须包括例如咕噜任务：

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。