101

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

4

12 回答 12

36

查看minify - 它允许您将多个 js、css 文件合并为一个，只需将它们堆叠到一个 url 中，例如

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

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

于 2012-02-15T04:21:34.517 回答
27

I think the YUI Compressor is the best there is. It minifies JS and CSS and it even strips those console.log statements people use for low-level JavaScript debugging.

Check out how easy it is.

You can start it in an ant task and therefore include it into your post/pre-commit hooks if you use svn/git.

UPDATE: Nowadays I use grunt with the concat, minify & uglify contributions. You can use it with a watcher so it creates new minified files in the background whenever you change your source. The uglify contrib not only strips console logs, but it also strips unused functions and properties.

See this tutorial for a brief insight.

UPDATE: Nowadays people step back from grunt und its predecessor "gulp" and use npm as a build tool. Read up on it here.

UPDATE: So now people use yarn to run npm. No wonder; yarns icon is a cat. Most current frameworks use webpack to bundle the resources into packages, which then also takes care of minification.

于 2012-02-21T12:03:45.083 回答
19

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

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

你还没有提到你的开发环境。您可以看到针对不同环境列出了许多压缩工具。而且您正在使用好工具 ieYUI Compressor。

于 2012-02-27T06:27:58.213 回答
13

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

在所需位置打开一个 cmd，然后使用“类型”将文件通过管道传输到文件

前任：

type .\scripts\*.js >> .\combined.js

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

我在我的角度/引导项目的 bat 文件中使用它

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
于 2016-04-01T10:55:12.417 回答
12

我最终使用CodeKit来连接我的 CSS 和 JS 文件。我发现真正有用的功能是能够在文件保存时进行连接；因为它监控各自的 CSS / JS 资产。一旦我将它们正确组合为 1 个 CSS 和 1 个 JS 文件，所有其他文件都可以简单地引用这 2 个。

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

免责声明：我与 CodeKit 没有任何关联。我在网上随机找到了它，它在我的开发过程中成为了一个很棒的工具。自从我一年多前第一次使用它以来，它还带来了很好的更新。

于 2013-02-27T19:01:40.310 回答
10

这是 2015 年的街道，imo 使用 gulp 的最简单方法 - http://gulpjs.com/。使用 gulp - uglify 压缩js 脚本和gulp-minify -css 压缩 css的代码非常简单。 Gulp绝对值得一试

于 2015-02-01T20:13:44.457 回答
6

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

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

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

于 2012-02-27T21:26:06.063 回答
6

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

  • 易于配置，供多个开发人员在一个项目中使用
  • 按 script_order.txt 中指定的顺序组合 JS 文件
  • 使用 Google 的 Closure Compiler 压缩它们
  • 尽可能将 JS 拆分为 <25kb 的块，因为 iPhone 不会缓存大于 25kb 的任何内容
  • 生成一个带有<script>标签的小型 PHP 文件，您可以在适当的地方包含这些标签
  • 用法：js.sh -u yourname

它可以进行一些改进，但对于我的用例来说，它比我迄今为止看到的所有其他解决方案都要好。

于 2013-09-07T17:33:31.493 回答
4

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

或老派解决方案：

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

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

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

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

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

我希望这有帮助！

于 2014-09-26T23:18:33.320 回答
3

如果您正在对您提供的文件进行任何预处理，您可能需要设置一个适当的构建系统（例如 Makefile）。这样，您就有了一些没有重复的源文件，并且每当您进行更改时，您都会运行“make”，它会更新所有自动生成的文件。如果已经有一个构建系统，请了解它的工作原理并使用它。如果没有，您需要添加一个。

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

于 2012-02-27T23:28:12.513 回答
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 %}

当 dev 版本准备好生产时，我使用这个脚本来合并所有 css 文件并替换min.css.

但是这个解决方案只有在所有页面中都包含相同的 css 文件时才有效。

于 2015-01-25T18:26:29.507 回答
1

您可以使用由著名的 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);
于 2016-01-29T19:10:35.210 回答