webpack性能優化-source-map

source-map：一種提供源代碼 到 構建后 代碼映射技術（如果構建后的代碼出錯了，通過映射可以追蹤源代碼的錯誤）

1. 打開webpack.config.js
   
2. source-map ：外部，錯誤代碼准確信息 和 源代碼的錯誤位置
   
   
3. devtool的全部值:
   
   

devtool的全部值及介紹
/* 
source-map: 一種 提供源代碼到構建后代碼映射 技術 (如果構建后代碼出錯了, 通過映射可以追蹤源代碼錯誤)

    [inline-|hidden-|eval-] [nosources] [cheap-[module-]]source-map
    source-map:外部--->錯誤代碼准確信息, 源代碼的錯誤位置
    inline-source-map:內嵌--->錯誤代碼准確信息 和源代碼的錯誤位置
    hidden-source-map:外部--->錯誤代碼錯誤原因, 但沒有錯誤位置,不能追蹤源代碼錯誤(隱藏源代碼)
    eval-source-map:內嵌--->錯誤代碼准確信息, 源代碼的錯誤位置

    nosources-source-map:外聯--->錯誤代碼准確信息,但是沒有任何源代碼信息(隱藏源代碼)
    cheap-source-map:外部--->錯誤代碼准確信息 和 源代碼的錯誤位置,只能精確行
    cheap-module-source-map外部--->錯誤代碼准確信息, 源代碼的錯誤位置

    內聯 和 外部的區別: 1. 外部生成了文件 , 內聯沒有文件, 2. 內聯構建速度快

    這么多source-map如何選擇？

    開發環境: 速度快，調試更友好
    速度快（ eval>inline>cheap>··· ）
    組合: eval-cheap-source-map > eval-source-map
    調試更友好
    組合source-map > cheap-module-source-map > cheap-source-map
    最終結果：eval-source-map(速度快)和 cheap-module-source-map(性能更好)  (vuecli與react腳手架默認)

    生產環境: 源代碼要不要隱藏？調試要不要更友好
    內嵌會讓代碼體積變大，所以在生產環境下不用 內嵌
    nosources-source-map  全部隱藏
    hidden-source-map   只隱藏源代碼，會提示構建后代碼錯誤信息
    最終結果：

              source-map 和 cheap-module-source-map
*/

4. 一般選擇:

開發環境: eval-source-map 或者 cheap-module-source-map

生產環境: source-map 或者 cheap-module-source-map