source map的使用
devtool
此選項(xiàng)控制是否生成，以及如何生成 source map。
使用 SourceMapDevToolPlugin 進(jìn)行更細(xì)粒度的配置。查看 source-map-loader 來處理已有的 source map。
選擇一種 source map 格式來增強(qiáng)調(diào)試過程。不同的值會(huì)明顯影響到構(gòu)建(build)和重新構(gòu)建(rebuild)的速度。
可以直接使用
SourceMapDevToolPlugin/EvalSourceMapDevToolPlugin來替代使用devtool選項(xiàng)，它有更多的選項(xiàng)，但是切勿同時(shí)使用devtool選項(xiàng)和SourceMapDevToolPlugin/EvalSourceMapDevToolPlugin插件。因?yàn)?code>devtool 選項(xiàng)在內(nèi)部添加過這些插件，所以會(huì)應(yīng)用兩次插件。
| devtool | 構(gòu)建速度 | 重新構(gòu)建速度 | 生產(chǎn)環(huán)境 | 品質(zhì)(quality) |
|---|---|---|---|---|
| (none) | +++ | +++ | yes | 打包后的代碼 |
| eval | +++ | +++ | no | 生成后的代碼 |
| cheap-eval-source-map | + | ++ | no | 轉(zhuǎn)換過的代碼（僅限行） |
| cheap-module-eval-source-map | o | ++ | no | 原始源代碼（僅限行） |
| eval-source-map | -- | + | no | 原始源代碼 |
| cheap-source-map | + | o | no | 轉(zhuǎn)換過的代碼（僅限行） |
| cheap-module-source-map | o | - | no | 原始源代碼（僅限行） |
| inline-cheap-source-map | + | o | no | 轉(zhuǎn)換過的代碼（僅限行） |
| inline-cheap-module-source-map | o | - | no | 原始源代碼（僅限行） |
| source-map | -- | -- | yes | 原始源代碼 |
| inline-source-map | -- | -- | no | 原始源代碼 |
| hidden-source-map | -- | -- | yes | 原始源代碼 |
| nosources-source-map | -- | -- | yes | 無源代碼內(nèi)容 |
這么多模式用哪個(gè)好？
開發(fā)環(huán)境推薦：
? cheap-module-eval-source-map
生產(chǎn)環(huán)境推薦：
? none(不使用source map)
原因如下：
- 使用 cheap 模式可以大幅提高 soure map 生成的效率。大部分情況我們調(diào)試并不關(guān)心列信息，而且就算 source map 沒有列，有些瀏覽器引擎（例如 v8） 也會(huì)給出列信息。
- 使用 module 可支持 babel 這種預(yù)編譯工具，映射轉(zhuǎn)換前的代碼。
- 使用 eval 方式可大幅提高持續(xù)構(gòu)建效率。官方文檔提供的速度對(duì)比表格可以看到 eval 模式的重新構(gòu)建速度都很快。
- 使用 eval-source-map 模式可以減少網(wǎng)絡(luò)請(qǐng)求。這種模式開啟 DataUrl 本身包含完整 sourcemap 信息，并不需要像 sourceURL 那樣，瀏覽器需要發(fā)送一個(gè)完整請(qǐng)求去獲取 sourcemap 文件，這會(huì)略微提高點(diǎn)效率。而生產(chǎn)環(huán)境中則不宜用 eval，這樣會(huì)讓文件變得極大。
