ソースマップ

Web サイトのパフォーマンスを向上させる最も簡単で効果的な方法の 1 つは、JavaScript ファイルと CSS ファイルを結合して圧縮することです.しかし、これらの圧縮ファイル内のコードをデバッグするのは非常に困難でイライラします.これには解決策があり、ソース マップという名前で呼ばれています.

ソース マップは、圧縮ファイル内のコードをソース ファイル内の元の位置にマッピングする方法を提供します.これは、少しのソフトウェアの助けを借りて、アセットが最適化された後でもアプリケーションを簡単にデバッグできることを意味します.ほとんどのブラウザー (Chrome、Firefox など) 開発者ツールには、ソース マップのサポートが組み込まれています.

元の main.css

body {
  background-color: rgb(27, 150, 199);
  color: white;
}

最適化された main.min.css

body{background-color:#1b96c7;color:#fff}
/*# sourceMappingURL=main.min.css.map */

ソースマップ main.min.css.map

{"version":3,"sources":["custom/main.scss"],"names":[],"mappings":"AAEA,KACE,wBAAmC,CACnC,UAJgB","file":"main.min.css","sourcesContent":["$font-color: white;\r\n\r\nbody {\r\n  background-color: rgb(27, 150, 199);\r\n  color: $font-color;\r\n}\r\n"]}

スタイル、スクリプトを最適化し、それらのソース マップを作成するために利用できる無料のプラグインがたくさんあります.
Optimize styles
Optimize Scripts
Create Sourcemaps

ソース マップを使用すると、開発者は簡単なデバッグ環境を維持しながら、サイトのパフォーマンスを最適化できます.