web-dev-qa-db-ja.com

本番環境でcss / javascript source-mapsを使用した場合のパフォーマンスへの影響は？

  • ソースマップは本番環境で使用する必要がありますか？デバッグ以外の利点はありますか？
  • 追加のサーバーラウンドトリップにより、アプリの読み込み時間に影響しますか？アプリが読み込まれてレンダリングされた後、ブラウザは.mapアセットを読み込むのに十分スマートですか？
  • ブラウザが.mapアセットを見つけられない場合（404エラー）、パフォーマンスに影響がありますか？修正する必要がありますか？

複雑なconcat/minifyビルドステップがある場合、最後のものを修正することは.mapアセットを提供するほど簡単ではないかもしれないことに注意してください。

javascriptcsshttprequestproduction-environmentsource-maps
67
Ray Shan

Charles Web Proxy を使用した簡単なテストでは、開発者ツールを開いた場合にソースマップがのみ読み込まれることが示されています。開発ツールを開かずにページをロードする場合開発ツールのhttpリクエストはありません。

Chrome 43とFirefox 38では動作は同じでした。

したがって、本番環境への影響はないようです。

69
pnichols

HTML5 Rocksから：

基本的には、結合/縮小されたファイルを未構築の状態にマッピングする方法です。 JavaScriptファイルを縮小して結合するとともに、プロダクション用にビルドすると、元のファイルに関する情報を保持するソースマップが生成されます。生成されたJavaScriptで特定の行と列の番号をクエリすると、元の場所を返すソースマップでルックアップを実行できます。開発者ツール（現在はWebKitナイトリービルド、Google Chrome、またはFirefox 23以降）はソースマップを自動的に解析し、縮小化されていない結合されたファイルを実行しているように見せることができます。

http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/

2
Jason