Webpack source map實戰分析詳解

2022-12-11 14:00:35

一、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