source-map整理

時間 2019-11-08

標籤 source map 整理简体版

原文原文鏈接

eval

每一個 module 會經過 eval() 來執行，並在後面添加 //# sourceURLjavascript

形式：

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?"
    )
  },
...])

特色：

eval有最好的性能，可是它只映射到每一個模塊源碼文件，沒有行列信息。css

source-map

打包代碼同時建立一個新的 sourcemap 文件，並在打包文件的末尾添加 //# sourceURL 註釋行告訴 JS 引擎文件在哪兒java

形式：

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

特色：

source-map 不能爲模塊和須要從新生成的代碼塊緩存SourceMaps，它適用於生產環境。webpack

inline-source-map

爲每個文件添加 sourcemap 的 DataUrl，注意這裏的文件是打包前的每個文件而不是最後打包出來的，同時這個 DataUrl 是包含一個文件完整 souremap 信息的 Base64 格式化後的字符串，而不是一個 urlgit

形式：

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...

特色：

能夠看到末尾的註釋 sourceMap 做爲 DataURL 的形式被內嵌進了 bundle 中，因爲 sourceMap 的全部信息都被加到了 bundle 中，整個 bundle 文件變得碩大無比。github

eval-source-map

這個就是把 eval 的 sourceURL 換成了完整 souremap 信息的 DataUrlweb

形式：

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,...
    )
  },
  ...
]);

特色：

結合了eval和source-map的特色，eval將每一個模塊包起來，而且最後添加source-map的base64信息，能夠知道行列，能夠爲模塊緩存它能夠更快的重建SourceMaps。chrome

cheap-source-map

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

特色：

不包含行信息，會減少map大小，不支持loader的sourcemap，好比從jsx映射到js，最終你只能訪問到js文件，看不了源碼的jsx文件。json

cheap-module-source-map

不包含列信息，同時 loader 的 sourcemap 也被簡化爲只包含對應行的。最終的 sourcemap 只有一份，它是 webpack 對 loader 生成的 sourcemap 進行簡化，而後再次生成的。

特色：

相較於cheap-source-map，能夠支持loader的sourcemap

hidden-source-map

和 source-map 同樣，但不會在 bundle 末尾追加註釋.

形式：

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

特色：

與 source-map 相比少了末尾的註釋，但 output 目錄下的 index.js.map 沒有少

注1：webpack 不只支持這 7 種，並且它們仍是能夠任意組合上面的 eval、inline、hidden 關鍵字，就如文檔所說，你能夠設置 souremap 選項爲 cheap-module-inline-source-map。

注2：若是你的 modules 裏面已經包含了 SourceMaps ，你須要用 source-map-loader來和合並生成一個新的 SourceMaps