web-dev-qa-db-ja.com

インラインソースマップを使用する理由

今日、私は ソースマップを含める を別のexample.min.mapファイルに入れるのではなく、縮小したJavaScriptファイルに直接入れることができることを学びました。私は疑問に思う:なぜ誰かがそのようなことをしたいのだろうか

ソースマップを持つことのの利点は私には明らかです:たとえば、圧縮ファイルを実行しながら、元の非圧縮ソースファイルでエラーをデバッグできます。最小化のメリットも明確です:ソースファイルのサイズが大幅に削減され、ブラウザーのダウンロードが高速化されます。

では、マップのサイズが縮小コード自体よりも大きい場合、なぜ地球上でソースマップを縮小ファイルに含めたいのでしょうか?

53
Akseli Palén

私は周りを検索しましたが、インラインソースマップの人々が開発で使用できることを確認できた唯一の理由です。インライン化されたソースマップは、実稼働環境では使用しないでください。

縮小されたファイルでソースマップをインライン化する理由は、ブラウザーが開発と実稼働でまったく同じJavaScriptを解析していることです。 Closure Compiler のような一部の縮小子は、コードを「単なる」縮小するだけではありません。 advanced options を使用すると、デッドコードの削除、関数のインライン化、または積極的な変数名の変更などのこともできます。これにより、縮小されたコードは(潜在的に)ソースファイルと機能的に異なります。

もちろん、これは外部のソースマップファイルを参照することで実行できますが、一部の人々はビルドプロセスにインライン化を好むようです。

35
pseudosavant

リモートデバッグを行っている場合、Chrome Androidデバイスでは、Chromeデバッガは、デバイスに個別のマップファイルが含まれています。インラインで含める場合、この問題は発生しません。

20
Tim

BrowserifyWebpackなどのJSバンドルツールは、すべての.jsファイルは、開発モードであっても、1つまたは複数のバンドルを入力します。したがって、この場合、生成されたバンドルにインラインソースマップを追加することが、余分なファイルを持ち込むことなくデバッグを支援する最も簡単な方法です。

11
jasonslyvia

状況によっては、インラインソースマップを評価済みコードに含めることができます。たとえば、coffeescript入力フィールドがあり、coffeescriptのコードのデバッグを有効にしたい場合。評価されたコードのソースマップに関するstackoverflowの質問があります。

評価済みコードで動作するソースマップの取得

コメントに@sourceURLを含めて、評価コードのURLを指定し、マップファイルをロードできます(8ページの SourceMap Spec を参照)。ただし、ファイルを特定の場所に書き込むことが常に可能とは限りません。

2
Helicase

cheap-module-source-mapは、実動ビルドの場合にはるかに優れています。

inline-source-mapは、テスト時に迅速でダーティなビルドを行うために使用されます

1
Carl