1. ホーム
  2. javascript

[解決済み] 複数のCSS/JSファイルの結合と最小化

2023-01-09 16:22:05

質問

私は、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つにまとめて、例えば次のような方法でminifyしたいと思います。 YUIコンプレッサー . しかし、その後、これらの3つのファイルを必要とするすべてのページを更新して、新しく最小化されたCSSを参照する必要があります。これはエラーを起こしやすいように思える(例えば、多くのファイルでいくつかの行を削除したり追加したりしている)。他にリスクの少ない方法はありますか?JSファイルについても同じ問題があります。

どのように解決するのですか?

結局 CodeKit を使って CSS と JS ファイルを連結することにしました。本当に便利だと思ったのは、ファイル保存時にそれぞれのCSS/JSアセットを監視して連結する機能です。一旦、1つのCSSと1つのJSファイルに適切に結合されると、他のすべてのファイルは単にこの2つを参照することができます。

CodeKitにオンザフライでミニフィケーションや圧縮を依頼することもできます。

免責事項:私はCodeKitとは一切関係がありません。ウェブでランダムに見つけたものですが、私の開発プロセスにおいて素晴らしいツールとして役立っています。また、1 年以上前に初めて使用したときから、良いアップデートが提供されています。