為什么內聯源地圖？

Question

今天我了解到可以將源映射直接包含到縮小的 JavaScript 文件中，而不是將它們放在單獨的 example.min.map 文件中。 我想知道：為什么會有人想要做那樣的事情？

擁有源映射的好處對我來說很明顯：例如，可以在運行縮小文件時使用原始的、未壓縮的源文件調試錯誤。 最小化的好處也很明顯：源文件的大小大大減小，瀏覽器下載速度更快。

那么，既然地圖的大小甚至比縮小代碼本身還要大，那么我到底為什么要將源地圖包含到縮小文件中呢？

Answer 1

我四處搜索，這是我能看到人們內聯源地圖用於開發的唯一原因。 內聯源映射不應在生產中使用。

使用縮小文件內聯源映射的理由是瀏覽器在開發和生產中解析完全相同的JavaScript。 像Closure Compiler這樣的一些縮小器不僅僅是“縮小”代碼。 使用高級選項，它還可以執行以下操作：刪除代碼，函數內聯或主動變量重命名。 這使得縮小的代碼（可能）在功能上與源文件不同。

當然，這仍然可以通過引用外部源映射文件來完成，但是有些人似乎更喜歡內聯他們的構建過程。

Answer 2

如果您在Android設備上遠程調試Chrome，Chrome調試器不僅可以訪問設備上所需的任何文件，還包括單獨的地圖文件。 如果您將它們包含在內，則不會出現此問題。

Answer 3

像Browserify或Webpack這樣的JS捆綁工具會將所有.js文件捆綁在一起或幾個捆綁包中，即使在開發模式下也是如此。 因此，在這種情況下，將內聯源映射添加到生成的bundle是幫助調試而不帶來額外文件的最簡單方法。

Answer 4

在某些情況下，您可能希望將內聯源圖包含到已評估的代碼中。 例如，您有一個coffeescript輸入字段，並且您希望在coffeescript中啟用對代碼的重新編譯。 在評估的代碼中有關於源映射的stackoverflow問題：

獲取源映射使用已評估的代碼

您可以在注釋中包含@sourceURL以指定eval代碼的URL並加載地圖文件（請參閱SourceMap規范3的第8頁）。 但是並不總是可以將文件寫入某個位置。

Answer 5

如果您正在開發瀏覽器擴展，inline-source-map 是唯一的調試選項，因為擴展本身無法訪問 sourcemap 文件——即使您可能必須在 manifest.json 中指定所有 sourcemap 文件（瀏覽器擴展的配置文件）。

Answer 6

cheap-module-source-map對於生產構建來說要好得多。

inline-source-map用於在測試時進行快速和臟的構建

Answer 7

用例（對我而言）是不支持源映射的非瀏覽器環境（或者根本不支持，因此需要 webpack。）

或者換一種說法，webpack 沒有 web。