Question

我正在尝试通过整合和压缩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文件也存在同样的问题。

Answer 1

签出minify - 它允许您将多个js，css文件合并为一个，只需将它们堆叠成一个网址，例如

<script src="/scripts/js/main.js,/scripts/js/adapter/adapter.js"></script>

我们已经使用它多年了，它做得很好并且可以即时完成（无需编辑文件）。

Answer 2

我认为YUI Compressor是最好的。它缩小了JS和CSS，甚至删除了人们用于低级JavaScript调试的console.log语句。

Check out how easy it is

你可以在一个ant任务中启动它，因此如果你使用svn / git，它会把它包含在你的post / pre commit钩子中。

更新：现在我使用grunt与concat，minify＆amp; uglify贡献。您可以将它与观察者一起使用，以便在您更改源时在后台创建新的迷你文件。 uglify contrib不仅剥离控制台日志，还剥离未使用的函数和属性。

请参阅this tutorial以获取简要介绍。

<强>更新如今人们从grunt和它的前身“gulp”退后一步，并使用npm作为构建工具。阅读here。

Answer 3

我需要更新需要这3个文件的所有页面才能引用新缩小的CSS。

首先我会说你应该有共同的标题。因此，无论何时需要，都不需要随时更改所有标头。单头或2-3是一个好习惯。因此，当您的页面需要时，您可以更改标题。因此，无论何时您想扩展您的网络应用程序，它都会降低风险和繁琐。

您没有提到您的开发环境。你可以看到有many compressing tools listed for different environments。而你正在使用好的工具ieYUI Compressor。

Answer 4

我最终使用CodeKit来连接我的CSS和JS文件。我觉得非常有用的功能是能够在文件保存时进行连接;因为它监视各自的CSS / JS资产。一旦我将它们正确组合，例如对于1个CSS和1个JS文件，所有其他文件都可以参考这2个。

您甚至可以要求CodeKit进行即时缩小/压缩。

免责声明：我与CodeKit没有任何关系。我在网上随机发现它，它在我的开发过程中一直是一个很好的工具。自从我一年多以前第一次使用它以来，它也提供了很好的更新。

Answer 5

Windows用户的快速提示，如果您只想连接文件：

在所需位置打开cmd，然后使用“类型”将文件传输到文件

例如：

del combos.js

type .\lib\jquery.min.js >> .\combos.js
type .\lib\bootstrap.min.js >> .\combos.js
type .\lib\Angular\angular.min.js >> .\combos.js
type .\lib\Angular\angular-route.min.js >> .\combos.js
type .\lib\Angular\angular-sanitize.min.js >> .\combos.js

type .\app.js >> .\combos.js
type .\services\*.js >> .\combos.js
type .\controllers\*.js >> .\combos.js

如果脚本的顺序很重要，则必须按所需顺序显式键入文件。

我在bat文件中使用 this 作为我的angular / bootstrap项目

{{1}}

Answer 6

2015年的街头和imo最简单的方式是使用gulp - http://gulpjs.com/。使用 gulp-uglify 为js脚本和 gulp-minify-css 为css编写代码非常简单。 Gulp 绝对值得一试

Answer 7

我没有看到你提到内容管理系统（Wordpress，Joomla，Drupal等），但如果你使用任何流行的CMS，他们都有可用的插件/模块（免费选项），将缩小和缓存你的CSS和JS。

使用插件可以让未压缩的版本保持可编辑状态，然后在进行更改时，插件会自动包含您的更改并重新压缩文件。只要确保你选择一个允许你排除文件（例如自定义js文件）的插件，它就会破坏任何东西。

我过去曾尝试手动保存这些文件，但它总是变成维护噩梦。祝你好运，希望这有所帮助。

Answer 8

对于那些想要更轻巧，更灵活的人，我今天创建了js.sh来解决这个问题。它是一个针对JS文件的简单命令行工具，可以轻松修改以处理CSS文件。优点：

可轻松配置供项目中的多个开发人员使用
按照script_order.txt
使用Google的Closure Compiler
尽可能将JS拆分为＆lt; 25kb块，因为iPhone不会缓存大于25kb的任何内容
生成一个包含<script>标记的小型PHP文件，您可以在适当的位置添加
用法：js.sh -u yourname

它可以使用一些改进，但它对我的用例比我到目前为止看到的所有其他解决方案更好。

Answer 9

优化的第一步是文件最小化。（我强烈建议GULP进行最小化和优化。它的简单手表解决方案，安装和所有文件都是一次压缩的。支持所有CSS，JS，less，sass等...）

或旧学校解决方案：

1）通常，作为优化过程，要优化网站性能，请尝试将所有CSS合并到一个文件中，然后使用Compass压缩文件。这样，您对静态CSS的多个请求将被替换为单个请求。

2）您可以使用CDN（或Google托管库）解决多个JS的问题，因此请求将转到其他服务器而不是您的服务器。这样，服务器不会在下一次发送之前等待先前的请求完成。

3）如果您有自己的本地存储的JavaScript，请使用Brackets插件“Compress JavaScript”最小化每个文件。基本上只需单击即可压缩JavsScript。Brackets是为CSS和JS编写的免费编辑器，但可用于PHP和其他语言。有很多插件可供前端和后端开发人员选择。通常“一键”来完成所有这些（到目前为止多个）命令。顺便说一句，Brackets取代了我非常昂贵的Dreamweaver;）

3）尝试使用Sass，Compass，less等工具来最小化CSS。

注意：即使不使用SASS混合或变量，您的CSS也会被压缩（只需简单地使用纯CSS和Compass“watch”命令就可以为您压缩它。）

我希望这有帮助！

Answer 10

如果您对所服务的文件进行任何预处理，则可能需要设置正确的构建系统（例如Makefile）。这样，您就有了一些没有重复的源文件，每当您进行更改时，都会运行＆＃39; make＆＃39;它使所有自动生成的文件保持最新。如果已经有一个构建系统，请了解它的工作原理并使用它。如果没有，您需要添加一个。

首先，弄清楚如何从命令行组合和缩小文件（YUICompressor文档涵盖了这一点）。为自动生成的东西指定一个目录，与你工作但可以访问Web服务器的东西分开，并输出到那里，例如gen / scripts / combined.js。将您使用的命令放入Makefile中，然后重新运行＆＃39; make＆＃39;每次你做出改变并希望它生效。然后更新其他文件中的标题以指向合并和缩小的文件。

Answer 11

在我的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 %}

当dev版本准备好投入生产时，我使用this script组合所有css文件并替换min.css的内容。

但只有当所有页面都包含相同的css文件时，此解决方案才有效。

Answer 12

您可以使用从着名的YUI压缩器构建的cssmin节点模块

$ 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);

Answer 13

此处可找到所有更快捷的实用程序

 $forumMessages->each(function ($message){
  $message->author = User::find($message->author_id)->name;
});

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

13 个答案: