[解決済み] 複数の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 年以上前に初めて使用したときから、良いアップデートが提供されています。
関連
-
[解決済み] JavaScriptで "use strict "は何をするのか、その根拠は?
-
[解決済み] let "と "var "の使い分けは?
-
[解決済み] CSSの親セレクタはありますか?
-
[解決済み] CSSでcellpaddingとcellspacingを設定する?
-
[解決済み】HTML5入力のプレースホルダの色をCSSで変更する。
-
[解決済み] URL/アドレスバーからJavascriptの関数を呼び出す
-
[解決済み] javascript の関数から `undefined` と `null` のどちらを返すのが良いのでしょうか?
-
[解決済み] JSHintの'+'前の改行不良の説明
-
[解決済み] Node.jsのES6クラスをrequireで作る
-
[解決済み] JavaScriptのArray.sort()メソッドでシャッフルするのは正しいのか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] <Enter>でjQuery UIダイアログを送信する
-
[解決済み] reactのrender関数でdynamic hrefを作成するには?
-
[解決済み] javascript の関数から `undefined` と `null` のどちらを返すのが良いのでしょうか?
-
[解決済み] JavaScriptで、ある文字列が別の文字列の中に出現するすべてのインデックスを見つけるにはどうすればよいですか?
-
[解決済み] JavaScriptで:hoverのCSSプロパティを変更する
-
[解決済み] Reactメモを使うべきではない場合とは?
-
[解決済み] ECMAScriptとは?
-
[解決済み] jQueryを使用して、すべてのクリックイベントハンドラを削除するにはどうすればよいですか?
-
[解決済み] Node.jsのES6クラスをrequireで作る
-
[解決済み] これは純関数ですか?