合并和压缩多个CSS / JS文件

Question

合并和压缩多个CSS / JS文件

javascriptcssoptimizationyui-compressorhttp-compression

102

我试图通过合并和压缩CSS和JS文件来优化网站性能。我的问题更多是关于如何在面对实际情况时（尽管这应该是其他开发人员普遍遇到的情况），实现这一目标的具体步骤。

我的页面引用了类似以下的几个CSS和JS文件:

<!--
  It's easier to work on smaller files during development.
  Hence, the multiple CSS and JS files.
-->
<link type="text/css" rel="stylesheet" href="/css/main.css" />
<link type="text/css" rel="stylesheet" href="/css/secondary-1.css" />
<link type="text/css" rel="stylesheet" href="/css/secondary-2.css" />

<script type="text/javascript" src="/scripts/js/main.js"></script>
<script type="text/javascript" src="/scripts/js/adapter/adapter.js"></script>
<script type="text/javascript" src="/scripts/js/adapter/title-adapter.js"></script>

对于生产版本，我想将3个CSS文件合并为一个，并使用例如YUI Compressor进行缩小。但是，我需要更新所有需要这3个文件的页面以引用新缩小的CSS。这似乎容易出错（例如，在许多文件中删除和添加某些行）。还有其他不那么冒险的方法吗？JS文件也有同样的问题。

- moey

1

我希望在新的asp.net 4.5中引入这样的功能，以便在“调试”中单独呈现和未被压缩的脚本，但在“发布”中它们被合并和压缩。 - Daniel Powell

12个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- moldcraft · Answer 1

在我的Symfony项目中，我会做类似这样的事情。

{# layout.html.twig #}

{% block styles %}
    {% if app.environment == 'prod' %}
        <link href="{{ asset('bundles/appmain/min.css') }}" rel="stylesheet" type="text/css" />
    {% else %}
        <link href="{{ asset('bundles/appmain/hello.css') }}" rel="stylesheet" type="text/css" />
        <link href="{{ asset('bundles/appmain/world.css') }}" rel="stylesheet" type="text/css" />
    {% endif %}
{% endblock %}

{# some-view.html.twig #}

{% extends 'AppMainBundle::layout.html.twig' %}

{% block styles %}
    {{ parent() }}

    {% if app.environment != 'prod' %}
        <link href="{{ asset('bundles/appsecond/styles.css') }}" rel="stylesheet" type="text/css" />
    {% else %}
{% endblock %}

当开发版本准备好投入生产时，我使用this script将所有CSS文件合并，并替换min.css的内容。但是，这个解决方案只适用于所有页面都包含相同的CSS文件。

- sdc · Answer 2

您可以使用cssmin节点模块，该模块是基于著名的YUI压缩器构建的。

$ npm -g i cosmic # install

# Usage   
var puts = require('util').puts,
fs = require('fs'),
cssmin = require('./cssmin');
var css = fs.readFileSync("/Any/Random/CSS/File.css", encoding='utf8');
var min = cssmin(css);
puts(min);