source-map整理

CoreDump 發布于2019-08-20 16:31 / 2440人閱讀

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

eval

每個 module 會通過 eval() 來執行，并在后面添加?//# 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?"
    )
  },
...])

特點：

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

source-map

打包代碼同時創建一個新的 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

特點：

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

inline-source-map

為每一個文件添加 sourcemap 的 DataUrl，注意這里的文件是打包前的每一個文件而不是最后打包出來的，同時這個 DataUrl 是包含一個文件完整 souremap 信息的 Base64 格式化后的字符串，而不是一個 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...

特點：

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

eval-source-map

這個就是把?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,...
    )
  },
  ...
]);

特點：

結合了eval和source-map的特點，eval將每個模塊包起來，并且最后添加source-map的base64信息，可以知道行列，可以為模塊緩存它可以更快的重建SourceMaps。

cheap-source-map

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

特點：

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

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?

調試

github上關于調試的問題：Source Maps don"t work on Chrome

個人實測：

chrome里能否調試源碼 x：不行 o：可以

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

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

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

cheap-module-source-map x(斷點位置不對)

source-map o

inline-source-map o

總結

eval：更快

inline：內聯

cheap：不含列信息，不支持loader sourcemap（譬如 babel 的 sourcemap，從jsx到js的映射）

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

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/82975.html

React結合webpack的具體使用

摘要：結合的具體使用我們一般是使用進行安裝的，這里我為大家推薦一款淘寶出的，這個和差不多，但是比安裝的要快很多安裝命令搭建環境初始化一個文件安裝全局安裝局部安裝安裝來把格式的代碼編譯成安裝來轉譯代碼安裝轉移的插件， React結合webpack的具體使用我們一般是使用npm進行安裝的，這里我為大家推薦一款淘寶出的cnpm，這個和npm差不多，但是比npm安裝的要快很多；安裝命令 npm ...

enrecul101 2019-08-20 18:19 評論0 收藏0
React結合webpack的具體使用

摘要：結合的具體使用我們一般是使用進行安裝的，這里我為大家推薦一款淘寶出的，這個和差不多，但是比安裝的要快很多安裝命令搭建環境初始化一個文件安裝全局安裝局部安裝安裝來把格式的代碼編譯成安裝來轉譯代碼安裝轉移的插件， React結合webpack的具體使用我們一般是使用npm進行安裝的，這里我為大家推薦一款淘寶出的cnpm，這個和npm差不多，但是比npm安裝的要快很多；安裝命令 npm ...

LeexMuller 2019-08-29 13:01 評論0 收藏0
React結合webpack的具體使用

摘要：結合的具體使用我們一般是使用進行安裝的，這里我為大家推薦一款淘寶出的，這個和差不多，但是比安裝的要快很多安裝命令搭建環境初始化一個文件安裝全局安裝局部安裝安裝來把格式的代碼編譯成安裝來轉譯代碼安裝轉移的插件， React結合webpack的具體使用我們一般是使用npm進行安裝的，這里我為大家推薦一款淘寶出的cnpm，這個和npm差不多，但是比npm安裝的要快很多；安裝命令 npm ...

Leck1e 2019-08-01 17:15 評論0 收藏0
vue + webpack +chrome 調試

摘要：最近整理一下針對的調試方法。一是的調試的插件，可以直接顯示組件現在的狀態。最終的只有一份，它是對生成的進行簡化，然后再次生成的。關于的標記是不起作用的需要手動加入命令問題描述 vue 經過webpack的打包壓縮之后，通過source看到的代碼已經面目全非，無法輕易對代碼進行調試。最近整理一下針對vue的調試方法。一、 devtools devtools是Chrome的調試vue的...

BWrong 2019-08-23 12:49 評論0 收藏0
細說 js 壓縮、sourcemap、通過 sourcemap 查找原始報錯信息

摘要：文件就是記錄了從源代碼文件到壓縮文件的一個代碼對應關系記錄表，通過壓縮文件和文件可以原原本本找出源代碼文件。細說 js 壓縮、sourcemap、通過 sourcemap 查找原始報錯信息 1. js 壓縮 js 壓縮對前端開發者來說是一門必修課。一般來說，壓縮 js 主要出于以下兩個目的：減小代碼體積，加快前端資源加載速度保護源代碼不被別人獲取壓縮 js 使用的工具庫：...

douzifly 2019-08-23 13:07 評論0 收藏0