Failed to parse SourceMap:

首先先說無腦的解決辦法:

在所有應用到map文件的地方都加上/path/to

 

以下轉載自:https://blog.csdn.net/sundacheng1989/article/details/51118865

瞭解一下歷史

這裏簡單說一下SourceMap這項技術。在現在寫網站的時候,如果有很多的javascript文件,拿ASP.NET NVC來說,在渲染內容到客戶端瀏覽器的時候,如果你使用一些Bundle類的話,能夠合併並且壓縮那些js文件,並且去除其中的空格等元素,從而減小文件的容量,提高網頁的反應速度。但是這樣一樣造成的問題就是在瀏覽器端無法對js文件進行調試,因爲進過壓縮的文件很緊湊,沒有空格與換行。

 

這裏先說一個額外的話題,就是怎麼把壓縮後的js文件還原成格式化的代碼。這裏有一個在線的工具就可以完成。http://jsbeautifier.org/,打開網址後,輸入壓縮後的js代碼,然後點擊Ctrl+Enter,自動就給你格式化了,很方便。

 

上邊說到的是如何格式化,就是把代碼拷貝出來進行格式化,跟調試還不一樣。想在調試的時候能在瀏覽器端顯示格式化的js代碼,這裏就引入了SourceMap的概念。

 

概括來講,SourceMap就是如何把壓縮後的js代碼映射成格式化代碼的方法。當你在Production環境部署代碼的時候,伴隨着壓縮與優化話的js代碼,還要有一個包含原始js代碼的sourcemap文件。當客戶端瀏覽器Chrome在收到這個壓縮後的js文件後,它會自動的去尋找服務器上相關的sourcmap文件並把壓縮的js代碼轉換成格式規範的js代碼。

 

Chrome要實現這個功能,首先要開啓這個設置。在Dev Tool的設置框中,勾選相應的項。注意,不是Chrome的設置頁面,是DevTool的設置頁面。

這裏來說一說SourceMap到底是怎麼工作的。首先我們要有相應的工具對已有的js文件進行壓縮,壓縮的同時會產生相應的sourcemap文件,然後再部署到服務器就可以了。目前不是所有的壓縮工具都符合要求,比如說ASP.NET MVC裏邊的那個Bundle類就不可以。現在最常用的是Closure compiler,在工具產生壓縮js文件之後,會在文件頭部加上這樣一行代碼,指明瞭服務器上的哪個文件是map文件。這個文件只有在瀏覽器打開了上邊提到的DevTool裏邊SourceMap的設置,纔會下載到本地,否則不會下載。這裏就顯示出了其優勢,一般用戶不用下載,其網頁只用優化後的js文件,響應速度快。對於開發者,發者可以下載map文件進行調試。

現在回到最初的問題,爲什麼我的網站會拋出那個異常?

看提示可以明白,是因爲網站引用的第三方的angular是壓縮後的版本,而且有sourcemap的指向信息,而我的網站沒有相應的map文件,所以拋出此異常。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章