教育行業(yè)A股IPO第一股（股票代碼 003032）

全國咨詢/投訴熱線：400-618-4000

什么是Source Map？

更新時間:2021年11月01日15時37分 來源:傳智教育 瀏覽次數(shù):

好口碑IT培訓(xùn)

Source Map 就是一個信息文件，里面儲存著位置信息。也就是說，Source Map 文件中存儲著代碼壓縮混淆前后的對應(yīng)關(guān)系。有了它，出錯的時候，除錯工具將直接顯示原始代碼，而不是轉(zhuǎn)換后的代碼，能夠極大的方便后期的調(diào)試。
webpack 開發(fā)環(huán)境下的 Source Map：在開發(fā)環(huán)境下，webpack 默認(rèn)啟用了 Source Map 功能。當(dāng)程序運行出錯時，可以直接在控制臺提示錯誤行的位置，并定位到具體的源代碼：



默認(rèn)Source Map 的問題：開發(fā)環(huán)境下默認(rèn)生成的Source Map，記錄的是生成后的代碼的位置。會導(dǎo)致運行時報錯的行數(shù)與源代碼的行數(shù)不一致的問題。示意圖如下：



解決默認(rèn)Source Map 的問題：開發(fā)環(huán)境下，推薦在webpack.config.js 中添加如下的配置，即可保證運行時報錯的行數(shù)與源代碼的行數(shù)保持一致：


webpack 生產(chǎn)環(huán)境下的Source Map：在生產(chǎn)環(huán)境下，如果省略了devtool 選項，則最終生成的文件中不包含Source Map。這能夠防止原始代碼通過Source Map 的形式暴露給別有所圖之人。



只定位行數(shù)不暴露源碼：在生產(chǎn)環(huán)境下，如果只想定位報錯的具體行數(shù)，且不想暴露源碼。此時可以將devtool的值設(shè)置為nosources-source-map。實際效果如圖所示：



采用此選項后：你應(yīng)該將你的服務(wù)器配置為，不允許普通用戶訪問source map 文件！

Source Map 的最佳實踐：
① 開發(fā)環(huán)境下： 建議把 devtool 的值設(shè)置為 eval-source-map  好處：可以精準(zhǔn)定位到具體的錯誤行。
② 生產(chǎn)環(huán)境下： 建議關(guān)閉 Source Map 或?qū)?devtool 的值設(shè)置為 nosources-source-map 好處：防止源碼泄露，提高網(wǎng)站的安全性。






猜你喜歡：

前端必會框架：VUE2.0+3.0全套教程

VUE優(yōu)點有哪些?VUE的特點介紹

vue初學(xué)：4小時+5個揀選案例快速入門Vue.js課程

transition-property屬性有幾個屬性值?

傳智前端與移動開發(fā)培訓(xùn)

0 分享到：
和我們在線交談！