source-map整理

CoreDump 發(fā)布于2019-08-20 16:31 / 2466人閱讀

摘要：這個(gè)就是把的換成了完整信息的形式特點(diǎn)結(jié)合了和的特點(diǎn)，將每個(gè)模塊包起來(lái)，并且最后添加的信息，可以知道行列，可以為模塊緩存它可以更快的重建。最終的只有一份，它是對(duì)生成的進(jìn)行簡(jiǎn)化，然后再次生成的。

eval

每個(gè) module 會(huì)通過(guò) eval() 來(lái)執(zhí)行，并在后面添加?//# sourceURL

形式：

webpackJsonp([1],[
  function(module,exports,__webpack_require__){
    eval(
      ...
      //# sourceURL=webpack:///./src/js/index.js?"
    )
  },
  function(module,exports,__webpack_require__){
    eval(
      ...
      //# sourceURL=webpack:///./src/static/css/app.less?./~/.npminstall/css-loader/0.23.1/css-loader!./~/.npminstall/postcss-loader/1.1.1/postcss-loader!./~/.npminstall/less-loader/2.2.3/less-loader"
    )
  },
  function(module,exports,__webpack_require__){
    eval(
      ...
      //# sourceURL=webpack:///./src/tmpl/appTemplate.tpl?"
    )
  },
...])

特點(diǎn)：

eval有最好的性能，但是它只映射到每個(gè)模塊源碼文件，沒(méi)有行列信息。

source-map

打包代碼同時(shí)創(chuàng)建一個(gè)新的 sourcemap 文件，并在打包文件的末尾添加?//# sourceURL?注釋行告訴 JS 引擎文件在哪兒

形式：

webpackJsonp([1],[
  function(e,t,i){...},
  function(e,t,i){...},
  function(e,t,i){...},
  function(e,t,i){...},
  ...
])
//# sourceMappingURL=index.js.map

特點(diǎn)：

source-map?不能為模塊和需要重新生成的代碼塊緩存SourceMaps，它適用于生產(chǎn)環(huán)境。

inline-source-map

為每一個(gè)文件添加 sourcemap 的 DataUrl，注意這里的文件是打包前的每一個(gè)文件而不是最后打包出來(lái)的，同時(shí)這個(gè) DataUrl 是包含一個(gè)文件完整 souremap 信息的 Base64 格式化后的字符串，而不是一個(gè) url

形式：

webpackJsonp([1],[
  function(e,t,i){...},
  function(e,t,i){...},
  function(e,t,i){...},
  function(e,t,i){...},
  ...
])
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9...

特點(diǎn)：

可以看到末尾的注釋 sourceMap 作為 DataURL 的形式被內(nèi)嵌進(jìn)了 bundle 中，由于 sourceMap 的所有信息都被加到了 bundle 中，整個(gè) bundle 文件變得碩大無(wú)比。

eval-source-map

這個(gè)就是把?eval?的 sourceURL 換成了完整 souremap 信息的 DataUrl

形式：

webpackJsonp([1],[
  function(module,exports,__webpack_require__){
    eval(
      ...
      //# sourceMappingURL=data:application/json;charset=utf-8;base64,...
    )
  },
  function(module,exports,__webpack_require__){
    eval(
      ...
      //# sourceMappingURL=data:application/json;charset=utf-8;base64,...
    )
  },  
  function(module,exports,__webpack_require__){
    eval(
      ...
      //# sourceMappingURL=data:application/json;charset=utf-8;base64,...
    )
  },
  ...
]);

特點(diǎn)：

結(jié)合了eval和source-map的特點(diǎn)，eval將每個(gè)模塊包起來(lái)，并且最后添加source-map的base64信息，可以知道行列，可以為模塊緩存它可以更快的重建SourceMaps。

cheap-source-map

不包含列信息，不包含 loader 的 sourcemap，（譬如 babel 的 sourcemap）

特點(diǎn)：

不包含行信息，會(huì)減小map大小，不支持loader的sourcemap，比如從jsx映射到j(luò)s，最終你只能訪(fǎng)問(wèn)到j(luò)s文件，看不了源碼的jsx文件。

cheap-module-source-map

不包含列信息，同時(shí) loader 的 sourcemap 也被簡(jiǎn)化為只包含對(duì)應(yīng)行的。最終的 sourcemap 只有一份，它是 webpack 對(duì) loader 生成的 sourcemap 進(jìn)行簡(jiǎn)化，然后再次生成的。

特點(diǎn)：

相較于cheap-source-map，可以支持loader的sourcemap

hidden-source-map

和 source-map 一樣，但不會(huì)在 bundle 末尾追加注釋.

形式：

webpackJsonp([1],[
  function(e,t,i){...},
  function(e,t,i){...},
  function(e,t,i){...},
  function(e,t,i){...},
  ...
])

特點(diǎn)：

與 source-map 相比少了末尾的注釋?zhuān)?output 目錄下的?index.js.map?沒(méi)有少

注1：webpack 不僅支持這 7 種，而且它們還是可以任意組合上面的 eval、inline、hidden 關(guān)鍵字，就如文檔所說(shuō)，你可以設(shè)置 souremap 選項(xiàng)為 cheap-module-inline-source-map。
注2：如果你的 modules 里面已經(jīng)包含了 SourceMaps ，你需要用?source-map-loader來(lái)和合并生成一個(gè)新的 SourceMaps?

調(diào)試

github上關(guān)于調(diào)試的問(wèn)題：Source Maps don"t work on Chrome

個(gè)人實(shí)測(cè)：

chrome里能否調(diào)試源碼 x：不行 o：可以

eval-source-map x(刷新斷點(diǎn)被忽略)

cheap-source-map x(不是源碼)

cheap-module-eval-source-map x(刷新斷點(diǎn)被忽略)

cheap-module-source-map x(斷點(diǎn)位置不對(duì))

source-map o

inline-source-map o

總結(jié)

eval：更快

inline：內(nèi)聯(lián)

cheap：不含列信息，不支持loader sourcemap（譬如 babel 的 sourcemap，從jsx到j(luò)s的映射）

cheap-module：不含列信息，支持loader sourcemap

source-map：包含行列信息，支持loader sourcemap

GPU云服務(wù)器云服務(wù)器 source-map 機(jī)柜整理整理收集整理資料

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/82975.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

CoreDump

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

鴻蒙之后，華為宣布再將捐贈(zèng)歐拉，鴻蒙和歐拉的捐贈(zèng)預(yù)計(jì)將給業(yè)界帶來(lái)哪些影響？

閱讀 2071·2021-11-11 16:54
在使用新的JavaScript庫(kù)時(shí)需要考慮的12件事

閱讀 2140·2019-08-30 15:55
前端面試題整理（定期更新）

閱讀 3642·2019-08-30 15:54
編寫(xiě)可維護(hù)的前端代碼

閱讀 419·2019-08-30 15:44
css繪制各種形狀圖形（第二版）

閱讀 2258·2019-08-30 10:58
JavaScript自定義事件

閱讀 457·2019-08-26 10:30
重繪、回流

閱讀 3077·2019-08-23 14:46
Mac聯(lián)機(jī)調(diào)試移動(dòng)端頁(yè)面方法和移動(dòng)端IOS遇到的兼容性問(wèn)題

閱讀 3248·2019-08-23 13:46

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

source-map整理

形式：

特點(diǎn)：

形式：

特點(diǎn)：

形式：

特點(diǎn)：

形式：

特點(diǎn)：

特點(diǎn)：

特點(diǎn)：

形式：

特點(diǎn)：

個(gè)人實(shí)測(cè)：

相關(guān)文章

React結(jié)合webpack的具體使用

React結(jié)合webpack的具體使用

React結(jié)合webpack的具體使用

vue + webpack +chrome 調(diào)試

細(xì)說(shuō) js 壓縮、sourcemap、通過(guò) sourcemap 查找原始報(bào)錯(cuò)信息

發(fā)表評(píng)論

0條評(píng)論

CoreDump

男|高級(jí)講師

TA的文章

鴻蒙之后，華為宣布再將捐贈(zèng)歐拉，鴻蒙和歐拉的捐贈(zèng)預(yù)計(jì)將給業(yè)界帶來(lái)哪些影響？

在使用新的JavaScript庫(kù)時(shí)需要考慮的12件事

前端面試題整理（定期更新）

編寫(xiě)可維護(hù)的前端代碼

css繪制各種形狀圖形（第二版）

JavaScript自定義事件

重繪、回流

Mac聯(lián)機(jī)調(diào)試移動(dòng)端頁(yè)面方法和移動(dòng)端IOS遇到的兼容性問(wèn)題

最新活動(dòng)

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

source-map整理

形式：

特點(diǎn)：

形式：

特點(diǎn)：

形式：

特點(diǎn)：

形式：

特點(diǎn)：

特點(diǎn)：

特點(diǎn)：

形式：

特點(diǎn)：

個(gè)人實(shí)測(cè)：

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！