前端工程化探究--source map

本文適合有 webpack 基礎的小伙伴進階學習

作者：廣東靚仔

一、前言

本文基于開源項目：

https://github.com/webpack/webpack/

補充擴展講解，希望能夠讓讀者一文搞懂 source map的機制。

1.1 what & why Source Map？

? ? 在日常開發(fā)項目過程中，我們編寫的源代碼會經(jīng)過編譯、封裝、壓縮等的處理（通俗理解就是輸入 => 轉(zhuǎn)換器 => 輸出），最后形成產(chǎn)物代碼。

? ? 接著我們在瀏覽器看到的就是一大串連在一起的代碼。當我們想debug 還是捕獲線上的報錯，就會很困難，這時候我們需要將產(chǎn)物代碼顯示回源代碼，source map 就是這樣的工具。

1.2 source-map 基本原理？

? ? 在編譯處理的過程中，在生成代碼的同時，生成一個代碼中被轉(zhuǎn)換的部分與源代碼中相應部分的映射關系表（關系表內(nèi)容由于篇幅有限這里不展開）。有了這樣一張完整的映射表，我們就可以通過 Chrome 控制臺中的"Enable Javascript source map"（如下圖所示）來實現(xiàn)調(diào)試時的顯示與定位源代碼功能。

1.3 source-map 本地環(huán)境 與 生產(chǎn)環(huán)境關注點？

開發(fā)環(huán)境中：

? ? 我們關注的是項目構建速度快，質(zhì)量高，以便于提升開發(fā)效率，很少會關注生成文件的大小和訪問方式。

生產(chǎn)環(huán)境：

? ? 我們一般關注是否需要提供線上 source map , 以及生成的文件大小和訪問方式是否會對頁面性能造成影響等，最后才是質(zhì)量和構建速度。

二、Webpack 中的 source map 預設

? ? 在webpack配置中devtool控制是否生成，以及如何生成 source map的。當我們設置devtool: 'none'，那么就會關閉source-map。

? ? 我從github上找來以下一段代碼，我們一一來分析：

var?path?=?require("path");

module.exports?=?[
?"eval",?//?打包非?？焖?，重新構建非常快速
?"eval-cheap-source-map",?//?打包比較快，重新構建快速
?"eval-cheap-module-source-map",
?"eval-source-map", //?打包慢，重新構建比較快
?"cheap-source-map",
?"cheap-module-source-map",
?"inline-cheap-source-map",
?"inline-cheap-module-source-map",
?"source-map",
?"inline-source-map",
?"hidden-source-map",
?"nosources-source-map"
].map(devtool?=>?({
?mode:?"development",
?entry:?{
??bundle:?"coffee-loader!./example.coffee"
?},
?output:?{
??path:?path.join(__dirname,?"dist"),
??filename:?`./[name]-${devtool}.js`
?},
?devtool,
?optimization:?{
??runtimeChunk:?true
?}
}));

我們來看一張從webpack上找來的一張關于各個預設的情況：

因此一般在開發(fā)環(huán)境中我們使用EvalSourceMapDevToolPlugin()。代碼如下：

webpack.config.js?
??...?
??//devtool:?'eval-source-map',?
??devtool:?false,?
??plugins:?[?
????new?webpack.EvalSourceMapDevToolPlugin({?
??????exclude:?/node_modules/,?
??????filename:?'[name].js.map',?//?可不寫
??????module:?true,?
??????columns:?false?
????})?
??],?
??...

上面的代碼中，我們將 devtool 設為 false，使用EvalSourceMapDevToolPlugin，通過傳入 module: true 和 column:false，達到和預設 eval-cheap-module-source-map 一樣的質(zhì)量，同時傳入 exclude 參數(shù)，排除第三方依賴包的 source map 生成。

? ? 保存設定后通過運行可以看到，在文件體積減?。ūM管開發(fā)環(huán)境并不關注文件大?。┑耐瑫r，再次構建的速度相比上面表格中的速度提升了將近一倍，達到了最快一級。

Webpack 三個source map處理插件介紹：

EvalDevToolModulePlugin

模塊代碼后添加 sourceURL=webpack:///+ 模塊引用路徑，不生成 source map 內(nèi)容，模塊產(chǎn)物代碼通過 eval() 封裝。

EvalSourceMapDevToolPlugin

生成 base64 格式的 source map 并附加在模塊代碼之后， source map 后添加 sourceURL=webpack:///+ 模塊引用路徑，不單獨生成文件，模塊產(chǎn)物代碼通過 eval() 封裝。

SourceMapDevToolPlugin

生成單獨的 .map 文件，模塊產(chǎn)物代碼不通過 eval 封裝。

平時我們?nèi)绻凶屑毩粢猓?span style="color: rgb(255, 41, 65);font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, "PingFang SC", Cambria, Cochin, Georgia, Times, "Times New Roman", serif;font-size: 16px;text-align: left;background-color: rgb(255, 255, 255);">sourceURL=webpack:///這幾個代碼是不是覺得很熟悉。

三、總結

? ? 本篇文章只是對source map知識做了一個簡單的梳理，對這塊感興趣的伙伴可以到官網(wǎng)學習學習。

這里推薦幾個學習source map資源

七個選項源映射介紹：? ? http://cheng.logdown.com/posts/2016/03/25/679045

映射表原理：http://www.qiutianaimeili.com/html/page/2019/05/89jrubx1soc.html

source-map github:? https://github.com/webpack/webpack/tree/master/examples/source-map

點擊下方關注，第一時間收到更新