2014-12-27 38 views
42

今天我知道可以將include source maps直接放入縮小的JavaScript文件中,而不是將它們放在單獨的example.min.map文件中。我想知道:爲什麼會有人想要做那樣的事情爲什麼內聯源地圖?

帶有源映射的好處很明顯對我來說是:例如,可以在運行縮小文件時用原始非壓縮源文件調試錯誤。 最小化的好處也很明顯:源文件的大小大大減少,使瀏覽器下載更快。

那麼爲什麼地球上我想包括源地圖到縮小的文件,因爲地圖的尺寸​​甚至比縮小的代碼本身更大

+0

是的,這似乎完全沒有意義! – Ryan 2014-12-27 20:57:52

+0

也許.map擴展名是未知的並且會爲執行.exe和.dll文件的計算機的管理員拋出錯誤或問題? – umeboshi 2014-12-27 21:02:24

+0

我還了解到,今天......花了一個小時試圖找出爲什麼沒有任何發現,然後發現他們已經存在嵌入到.js文件中...... – 2016-11-18 04:54:35

回答

27

我周圍搜索,我可以看到人們內聯源地圖的唯一原因是用於開發。內聯源地圖不應用於生產。

將您的縮小文件內聯到源映射的理由是,瀏覽器正在解析開發和生產中完全相同的JavaScript。像Closure Compiler這樣的一些縮略語不僅僅是「簡化」代碼。使用advanced options它也可以執行以下操作:去除死代碼,函數內聯或主動變量重命名。這使縮小的代碼(可能)在功能上與源文件不同。

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

9

JS捆綁工具(如BrowserifyWebpack)會捆綁所有.js文件輸入一個或多個捆綁包,即使在開發模式下也是如此。因此,在這種情況下,將內聯源地圖添加到生成的捆綁包是幫助調試而不引入額外文件的最簡單方法。

+0

太棒了。我會嘗試。你可能也解決了我的問題。 http://stackoverflow.com/questions/40199998/how-to-generate-custom-source-map-with-custom-webpack-loader – 2016-10-23 07:51:39

2

在某些情況下,您可能希望將內嵌源代碼映射到評估代碼中。例如,您有一個coffeescript輸入字段,並且您希望啓用在coffeescript中的代碼的debbuging。有一個在評估碼有關源代碼映射一個計算器問題:

Getting source maps working with evaluated code

你可以包括@sourceURL在留言中註明您的eval代碼的URL和加載地圖文件(見SourceMap Spec 3 8頁)。但是將文件寫入某個位置並不總是可行的。

0

cheap-module-source-map對於生產版本更好。

inline-source-map用於測試

13

時做出快速和骯髒的建立如果你使用的是Android設備上的遠程調試Chrome瀏覽器,該瀏覽器調試器不能隨便訪問它希望在設備上的任何文件,包括單獨的地圖文件。如果您將它們包含在內聯中,則不存在此問題。

+0

沒錯,但是一旦你的文件變得大一倍,性能會如何呢? – Remi 2018-02-01 10:15:24

+0

你顯然只會在開發中做到這一點 – Tim 2018-02-01 16:32:00

+0

我不同意。如果你有一個DTAP設置,你還可以在測試和驗收時使用一個縮放版本,附帶一個源代碼映射。甚至在產品上也允許在該環境下進行調試。在開發過程中,您不必使用縮小版本的persé。程序包管理器允許爲源代碼提供單獨的文件,您可以將它們一起發送,因此您不必將其包含在初始加載中以防止性能下降。 – Remi 2018-02-01 19:44:27