源映射的目的是什么？

Question

有人可以解釋一下源地圖的意義嗎？ 因為在我看來，我的串聯和縮小文件與 100 多個模塊一起加載（談論 JavaScript）。 當我加載兩倍於以前的大小時，這如何不影響性能？

Answer 1

源映射的重點是您可以運行縮小的 Javascript 或轉譯的 Javascript（它本身在調試器中不是特別可讀），但是當您打開調試器時，源映射由調試器加載並為您提供可讀的用於調試目的的源代碼形式。 如果瀏覽器未配置源映射調試，則不會加載源映射。

如果您將代碼從 TypeScript 或 ES6 轉換為 ES5 Javascript，源映射也非常有用，這樣您就可以看到您最初在調試器中編寫的實際代碼，而不僅僅是轉換和縮小的輸出。

在源地圖時代之前的替代方案是在您的網站上擁有單獨版本的站點或選項，這些版本將加載非縮小的 JS，以便您可以使用普通符號進行調試，但這當然實際上並不是調試完全相同的代碼所以即便如此，這仍然可能讓您不得不嘗試調試縮小的代碼。

您可以在此處閱讀有關如何在 Chrome 調試器中啟用源映射的信息。 如果您正在查看瀏覽器下載的內容，請確保您使用的瀏覽器在檢查是否已下載時未啟用源映射。

Answer 2

因為只有在打開調試器時才加載 sourcemap。

不打開調試器的實際用戶仍然可以從縮小中受益。

Answer 3

源映射是一種開發人員工具。 當在縮小的源中發生錯誤時知道原始源是實用的，因此您可以追蹤錯誤的源。

因此，源映射僅由調試器加載，默認情況下不會加載。 但是，您應該考慮禁用生產環境的源映射，因為調試數據通常不應該在生產環境中：出於性能和（更重要的）安全原因