Webpack source map實戰分析詳解

Posted on by

一、webpack基礎

推薦我的另一篇文章：Webpack基礎

二、source-map

2.1 認識source-map

代碼通常運行在瀏覽器上時，是通過打包壓縮的：

  • 真實跑在瀏覽器上的代碼，和我們編寫的代碼其實是有差異的
  • 比如ES6的代碼可能被轉換成ES5
  • 比如對應的代碼行號、列號在經過編譯後肯定會不一致
  • 比如代碼進行醜化壓縮時，會將編碼名稱等修改
  • 比如使用瞭TypeScript等方式編寫的代碼，最終轉換成JavaScript

但是，當代碼報錯需要調試時（debug），調試轉換後的代碼是很困難的

那麼如何可以調試這種轉換後不一致的代碼呢？答案就是 source-map

  • source-map 是從已轉換的代碼，映射到原始的源文件
  • 使瀏覽器可以重構原始源並在調試器中顯示重建的原始源

2.2 如何使用source-map

如何可以使用source-map呢？

const path = require('path')
module.exports = {
  mode: 'production',
  devtool: "source-map",
  entry: './src/main.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, './build')
  }
}

console.log("hello world"),console.log("foo function exec~");
//# sourceMappingURL=bundle.js.map
  • 第一步：根據源文件，生成source-map文件，webpack在打包時，可以通過配置生成source-map
  • 第二步：在轉換後的代碼，最後添加一個註釋，它指向sourcemap

瀏覽器會根據我們的註釋，查找相應的source-map，並且根據source-map還原我們的代碼，方便進行調試。

在Chrome中，可以按照如下的方式打開source-map：

  • 鼠標右鍵檢查，打開控制臺後點擊右上角的設置

2.3 source-map文件分析

最初source-map生成的文件大小是原始文件的10倍，第二版減少瞭約50%，第三版又減少瞭50%，所以目前一個133kb的文件，最終的source-map的大小大概在300kb。

目前的source-map長什麼樣子呢？

  • version：當前使用的版本，也就是最新的第三版
  • sources：從哪些文件轉換過來的source-map和打包的代碼（最初始的文件）
  • names：轉換前的變量和屬性名稱
  • mappings：source-map用來和源文件映射的信息（比如位置信息等），一串base64 VLQ（veriable-length quantity可變長度值）編碼
  • file：打包後的文件（瀏覽器加載的文件）
  • sourceContent：轉換前的具體代碼信息（和sources是對應的關系）
  • sourceRoot：所有的sources相對的根目錄

2.4 source-map常見值

如何在使用webpack打包的時候，生成對應的source-map呢？

  • webpack 提供瞭非常多的選項（目前是26個），來處理source-map
  • 選擇不同的值，生成的source-map會稍微有差異，打包的過程也會有性能的差異，可以根據不同的情況進行選擇

下面幾個值不會生成source-map

false：不使用source-map，也就是沒有任何和source-map相關的內容

none：production模式下的默認值（什麼值都不寫） ，不生成source-map

eval：development模式下的默認值，不生成source-map

  • 但是它會在eval執行的代碼中，添加 //# sourceURL=；
  • 它會被瀏覽器在執行時解析，並且在調試面板中生成對應的一些文件目錄，方便我們調試代碼

其他常見的值

  • source-map：通常在production模式下設置，生成一個獨立的source-map文件，並且在bundle文件中有一個註釋，指向source-map文件
  • bundle文件中有如下的註釋：
  • 開發工具會根據這個註釋找到source-map文件，並且解析 //# sourceMappingURL=bundle.js.map

2.5 source-map不常見值

eval-source-map：會生成sourcemap，但是source-map是以DataUrl添加到eval函數的後面

inline-source-map：會生成sourcemap，但是source-map是以DataUrl添加到bundle文件的後面

cheap-source-map（development）：

  • 會生成sourcemap，但是會更加高效一些（cheap低開銷），因為它沒有生成列映射（Column Mapping）
  • 平常在開發中，隻需要行信息通常就可以定位到錯誤瞭

cheap-module-source-map（development）：

  • 會生成sourcemap，類似於cheap-source-map，但是對源自loader的sourcemap處理會更好
  • 比如通過 babel-loader來處理，生成的source-map文件會將一些空行刪掉，無法更好的還原，此時可以使用此選項

hidden-source-map：

  • 會生成sourcemap，但是不會對source-map文件進行引用
  • 相當於刪除瞭打包文件中對sourcemap的引用註釋

如果我們手動添加進來，那麼sourcemap就會生效瞭

//# sourceMappingURL=bundle.js.map

nosources-source-map：會生成sourcemap，但是生成的sourcemap隻有錯誤信息的提示，不會生成源代碼文件

組合值

組合的規則如下：

  • inline-|hidden-|eval：三個值時三選一
  • nosources：可選值
  • cheap可選值，並且可以跟隨module的值

[inline-|hidden-|eval-][nosources-][cheap-[module-]]source-map

2.6 source-map最佳實踐

開發階段：推薦使用 source-map 或者 cheap-module-source-map

  • 這分別是vue和react使用的值，可以獲取調試信息，方便快速開發

測試階段：推薦使用 source-map 或者 cheap-module-source-map

  • 測試階段我們也希望在瀏覽器下看到正確的錯誤提示

發佈階段：false、缺省值（不寫）

以上就是Webpack source map示例分析詳解的詳細內容，更多關於Webpack source map的資料請關註WalkonNet其它相關文章！

推薦閱讀：