iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 13
1
Webpack 官網 source-map 定義
devtool build rebuild production quality
none +++ +++ yes bundled code
eval +++ +++ no generated code
cheap-eval-source-map + ++ no transformed code (lines only)
cheap-module-eval-source-map o ++ no original source (lines only)
eval-source-map -- + no original source
cheap-source-map + o yes transformed code (lines only)
cheap-module-source-map o - yes original source (lines only)
inline-cheap-source-map + o no transformed code (lines only)
inline-cheap-module-source-map o - no original source (lines only)
source-map -- -- yes original source
inline-source-map -- -- no original source
hidden-source-map -- -- yes original source
nosources-source-map -- -- yes without source content
+++ super fast, ++ fast, + pretty fast, o medium, - pretty slow, -- slow

Webpack source-map 之亂

看了官網的介紹,有些 Buble Rebuild 速度比較快、有些報錯的資訊跟行數比較準確。各種的 source-map 提供了許多的選擇,但沒有實際使用過,根本不知道設定哪一個比較適合專案。所以我們針對 source-map 每一個參數實際測試,並且記錄觀察結果。

觀察各種 source-map 報錯狀況

Webpack 打包會處理 Babel 轉譯、minify、uglify,我在首頁新增了一個未宣告的變數如下:

// 未使用 var、let 或 const 宣告的變數
h = 1 + 2

瀏覽器會看到這樣的錯誤

ERROR

根據不同的 source-map 設定,打包的速度以及顯示的錯誤資訊都不太一樣,下方就錯誤資訊的正確度做了記錄

devtool 正確顯示錯誤文件 正確顯示錯誤行數 打包速度
none X X +++
eval O X +++
cheap-eval-source-map O X +
cheap-module-eval-source-map X X O
eval-source-map O O --
cheap-source-map X X +
cheap-module-source-map X X O
inline-cheap-source-map X X +
inline-cheap-module-source-map X X O
source-map X X --
inline-source-map X X --
hidden-source-map X X --
nosources-source-map X X --

就資訊正確度來說,只有 eval cheap-eval-source-map eval-source-map 這三種設定,都能夠正確地指出發生錯誤的原始文件,其他的設定最多只能看到 Bundle 後的文件名稱。而顯示錯誤行數的部分 eval-source-map 正確顯示原始檔的行數,其他的設定則只能顯示 Babel 編譯後的行數,而在打包速度的部分 eval 則是官方文件中最快速的設定。因此就這次的測試結果,開發階段我們選擇 eval 作為 source-map 的設定,Production 則設定為 none 不生成 source-map。


上一篇
使用 Sprite-Smith-Plugin 產生 CSS Sprite
下一篇
Webpack-Dll-Plugin 介紹
系列文
Webpack with ASP.NET MVC30

尚未有邦友留言

立即登入留言