在生產中使用 css/javascript 源映射的性能影響？

Question

• 應該在生產環境中使用 source-maps 嗎？ 除了調試之外，它們是否提供任何好處？
• 由於額外的服務器往返，它們是否會影響應用加載時間？ 瀏覽器是否足夠智能以在加載和呈現應用程序后加載.map資產？
• 如果瀏覽器找不到.map資產（ 404錯誤），是否會影響性能？ 我應該關心修復它嗎？

請注意，如果存在復雜的 concat / minify 構建步驟，修復最后一個可能不像提供.map資產那么容易。

Answer 1

使用Charles Web Proxy 進行的快速測試表明，僅在打開開發人員工具時才加載源映射。 如果您在未打開開發工具的情況下加載頁面，則不會對源地圖進行 http 請求。

Chrome 43 和 Firefox 38 中的行為是相同的。

所以看起來它們不會對生產環境產生影響。

Answer 2

來自 HTML5 搖滾：

基本上，這是一種將組合/縮小文件映射回未構建狀態的方法。 當您為生產構建時，連同縮小和組合您的 JavaScript 文件，您會生成一個源映射，其中包含有關原始文件的信息。 當您在生成的 JavaScript 中查詢某個行號和列號時，您可以在返回原始位置的源地圖中進行查找。 開發人員工具（目前是 WebKit nightly builds、Google Chrome 或 Firefox 23+）可以自動解析源映射並使它看起來好像您正在運行未縮小和未組合的文件。

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