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

全國(guó)咨詢/投訴熱線：400-618-4000

什么是Source Map？

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

好口碑IT培訓(xùn)

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



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



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


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



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



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

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






猜你喜歡：

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

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

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

transition-property屬性有幾個(gè)屬性值?

傳智前端與移動(dòng)開(kāi)發(fā)培訓(xùn)

0 分享到：
和我們?cè)诰€交談！