Vue productionSourceMap 詳解

Vue 在生產環境下默認會生成 sourceMap 文件， productionSourceMap 設置為 false 可以禁用它。但是在一些情況下，比如開發小程序等，需要禁用 sourceMap 以減小文件體積。這篇文章將對 Vue productionSourceMap 從多個方面進行詳細闡述。

一、productionSourceMap 的作用

productionSourceMap 在構建時生成完整的 SourceMap 文件，默認情況下開啟。生產環境中啟用 productionSourceMap 有助於開發者調試代碼，可以在瀏覽器的調試工具中查看到源文件中錯誤的代碼位置，而不是編譯後的代碼位置。這對於定位線上問題十分有幫助。

然而，開啟 productionSourceMap 會使得構建後的代碼包含源代碼映射關係，導致構建後的代碼文件體積增大。體積增加會影響頁面載入速度，而且源代碼也存在泄漏的風險，因此有些開發者會選擇在生產環境中禁用 productionSourceMap。

二、禁用 productionSourceMap 靜態資源定位

禁用 productionSourceMap 後，會對靜態資源的定位產生影響，需要手動配置 webpack.

要想引入其它靜態資源（比如圖片、字體等），需要將資源放到靜態資源目錄（static）下，然後使用相對路徑引用即可。或者使用 require 和 import 引入的靜態資源，也可以通過相對路徑來引入。

const img = require('@/assets/img/logo.png')
import font from '@/assets/font/iconfont.css'

三、禁用 sourceMap 屬性

Vue 官方提供了關閉 sourceMap 功能的方法，只需在 module.exports 內的 configureWebpack 選項中添加以下代碼：

module.exports = {
  configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      // 禁用 sourceMap
      config.devtool = false
    }
  }
}

這樣可以禁用 sourceMap，減小代碼體積。同時，在使用這種方式的過程中，我們需要了解，禁用 sourceMap 會導致構建後的文件無法排查錯誤，如果出現錯誤，將需要通過手動定位錯誤代碼位置來解決。

四、使用環境變數控制

在 Vue 項目中，可以運用環境變數來控制生產環境下是否啟用 productionSourceMap 屬性。還是在 configureWebpack 中，可以使用 process.env 對象來獲取環境變數，示例代碼如下：

module.exports = {
  configureWebpack: config => {
    if (process.env.VUE_APP_MODE === 'development') {
      // 開發環境
      config.devtool = 'source-map'
    } else {
      // 生產環境
      config.devtool = false
    }
  }
}

在定義環境變數時，在 package.json 中 scripts 對象的命令行參數中添加環境變數，示例如下：

"scripts": {
  "build:test": "cross-env VUE_APP_MODE=qa vue-cli-service build"
}

五、手動排查錯誤位置

禁用 sourceMap 會導致構建後的文件無法排查錯誤。為了確保出現問題時，我們可以及時排查錯誤，我們可以手動定位錯誤代碼位置。可以有兩種方法：

方法一、在瀏覽器中使用 sourcemap-webpack-plugin 插件構建後的版本，這個插件可以為我們的構建版本提供 sourceMap 文件的映射服務。

方法二、在代碼上添加一些通用的排查錯誤方法，例如在基礎的 Vue 組件模塊中，代碼可以如下所示：

<template>
  <div>
    ...
  </div>
</template>

<script>
export default {
  name: 'componentName',
  data() {
    return {
      ...
    }
  },
  methods: {
    ...
  },
  created() {
    console.log('當前組件：', this.$options.name, '，路徑：', this.$options.__file)
  }
}
</script>

以上是本篇文章對於 Vue productionSourceMap 的詳細闡述，通過閱讀本文可以了解 productionSourceMap 的作用、禁用/啟用方法以及手動排查錯誤位置的方法。如果您有更好的建議或意見，歡迎在評論區留言。