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ファイルを1つに結合し、YUICompressorなどを使用して縮小したいと思います。しかし、次に、新しく縮小されたCSSを参照するために、これら3つのファイルを必要とするすべてのページを更新する必要があります。これはエラーが発生しやすいようです（たとえば、多くのファイルでいくつかの行を削除および追加している場合）。他のリスクの少ないアプローチはありますか？JSファイルについても同じ問題です。

4

12 に答える 12

36

minifyをチェックしてください-複数のjs、cssファイルをURLにスタックするだけで1つにまとめることができます。

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

私たちは何年もそれを使用してきました、そしてそれは素晴らしい仕事をし、その場でそれをします（ファイルを編集する必要はありません）。

于 2012-02-15T04:21:34.517 に答える
27

YUIコンプレッサーは最高だと思います。それはJSとCSSを最小console.log化し、人々が低レベルのJavaScriptデバッグに使用するステートメントを取り除きます。

それがいかに簡単かをチェックしてください。

antタスクで開始できるため、svn / gitを使用する場合は、post/pre-commitフックに含めることができます。

更新：最近、私はconcat、minify、uglifyの貢献でgruntを使用しています。ウォッチャーで使用できるため、ソースを変更するたびにバックグラウンドで新しい縮小ファイルが作成されます。uglify contribは、コンソールログを削除するだけでなく、未使用の関数とプロパティも削除します。

簡単な洞察については、このチュートリアルを参照してください。

更新： 最近、人々はうなり声とその前身の「gulp」から離れて、ビルドツールとしてnpmを使用しています。ここでそれを読んでください。

更新： 今、人々はnpmを実行するためにyarnを使用しています。不思議ではありません。毛糸のアイコンは猫です。現在のほとんどのフレームワークは、webpackを使用してリソースをパッケージにバンドルし、パッケージはミニファイも処理します。

于 2012-02-21T12:03:45.083 に答える
19

新しく縮小されたCSSを参照するには、これら3つのファイルを必要とするすべてのページを更新する必要があります。

まず、共通のヘッダーが必要だと思います。したがって、必要なときにいつでもすべてのヘッダーを変更する必要はありません。単一のヘッダーまたは2〜3を使用することをお勧めします。したがって、ページの必要に応じて、ヘッダーを変更できます。したがって、Webアプリを拡張したいときはいつでも、リスクが少なく、面倒です。

開発環境については言及していません。さまざまな環境向けにリストされた多くの圧縮ツールがあることがわかります。そして、あなたは良いツールieYUICompressorを使用しています。

于 2012-02-27T06:27:58.213 に答える
13

ファイルを連結するだけの場合のWindowsユーザー向けのクイックヒント：

目的の場所でcmdを開き、「type」を使用してファイルをファイルにパイプします。

元：

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

スクリプトの順序が重要な場合は、ファイルを希望の順序で明示的に入力する必要があります。

これをangular/bootstrapプロジェクトの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とは一切関係がありません。私はそれをウェブ上でランダムに見つけました、そしてそれは私の開発プロセスにおいて素晴らしいツールとして役立ちました。また、1年以上前に最初に使用して以来、優れたアップデートが付属しています。

于 2013-02-27T19:01:40.310 に答える
10

ストリートでの2015年であり、imoがgulpを使用する最も簡単な方法-http: //gulpjs.com/。jsスクリプトの場合はgulp-uglifyを使用し、cssの場合はgulp-minify-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のClosureCompilerでそれらを圧縮します
  • iPhoneは25kbを超えるものをキャッシュしないため、可能な場合はJSを25kb未満のチャンクに分割します
  • <script>必要に応じて含めることができるタグを含む小さなPHPファイルを生成します
  • 使用法：js.sh -u yourname

いくつかの改善を使用することもできますが、これまでに見た他のすべてのソリューションよりも、私のユースケースの方が優れています。

于 2013-09-07T17:33:31.493 に答える
4

最適化の最初のステップは、ファイルの最小化です。（最小化と最適化にはGULPを強くお勧めします。そのシンプルなウォッチソリューション、インストール、およびすべてのファイルが一度に圧縮されます。すべてのCSS、JS、less、sassなどをサポートします...）

または古い学校の解決策：

1）一般に、最適化のプロセスとして、サイトのパフォーマンスを最適化するには、すべてのCSSを1つのファイルにマージし、 Compassを使用してファイルを圧縮してみてください。そうすれば、静的CSSへの複数のリクエストが単一のリクエストに置き換えられます。

2）CDN（またはGoogle Hosted Libraries）を使用して解決できる複数のJSの問題。これにより、リクエストは自分のサーバーではなく他のサーバーに送信されます。そうすれば、サーバーは次のリクエストを送信する前に前のリクエストが完了するのを待ちません。

3）ローカルに保存された独自のJavaScriptがある場合は、Bracketsプラグイン「CompressJavaScript」を使用して各ファイルを最小化します。基本的にワンクリックでJavsScriptを圧縮できます。ブラケットはCSSおよびJS用に作成された無料のエディターですが、PHPおよびその他の言語で使用できます。フロントエンド開発者とバックエンド開発者の両方のために作られた、選択できるプラグインはたくさんあります。一般に、これらすべての（これまでのところ複数の）コマンドを実行するには「ワンクリック」です。ところで、ブラケットは私の非常に高価なDreamweaverに取って代わりました;）

3） CSSを最小限に抑えるために 、 Sass、Compassなどのツールを使用してみてください 。

注：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 %}

開発バージョンの本番環境の準備ができたら、このスクリプトを使用してすべての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 に答える