Vue SourceMap

一、概述

Vue.js是一套構建用戶界面的漸進式框架，通過HTML模板或者直接寫render函數可以快速開發單頁應用。在開發過程中，很多時候我們需要調試代碼，追蹤錯誤。Vue官方提供了SourceMap技術，可以幫助我們在錯誤提示信息中直接鏈接到源代碼，從而更方便地進行調試。

在打包壓縮後的JS代碼里，有時很難找到錯誤發生的位置。SourceMap是一種映射關係文件，其中包含了壓縮前和壓縮後的代碼的位置，這個文件可以幫助我們去定位代碼的真實位置。

二、使用方法

在Vue CLI中默認是開啟SourceMap的，只需要在webpack的配置文件中將其設置為true即可：

module.exports = {
    //...
    productionSourceMap: true
    //...
}

也可以通過vue.config.js文件中進行配置：

module.exports = {
    productionSourceMap: true
}

在代碼打包後，壓縮的JS文件會攜帶SourceMap文件一同發布到伺服器。如果你需要禁用它，只需將productionSourceMap設置為false。

三、生成SourceMap

在開發過程中，我們可以在webpack的配置文件中設置devtool選項。這個選項配置webpack如何生成SourceMap。以下是一些選項的示例：

module.exports = {
    devtool: 'source-map'
}

這會生成一個外部的source-map文件，在每個JS文件的末尾添加一個sourceURL注釋。這些sourceURL注釋指向source-map文件的位置。

module.exports = {
    devtool: 'cheap-source-map'
}

這種配置方式比上面的選項更快，會忽略列信息，只有行信息。它會生成一個外部的source-map文件。只是這個文件生成的時候，只包含每個打包後的模塊的第一行。

module.exports = {
    devtool: 'inline-source-map'
}

這種選項生成一個base64-encoded inline sourcemap文件，類似於DataUrl。它不會生成外部的source-map文件。

四、優化

然而，開啟SourceMap會導致一些性能問題，開發者可以通過一些優化配置來減輕這些性能問題。webpack提供了內聯WebWorker來生成SourceMap，同時可以使用cache-loader來緩存生成的SourceMap。

module.exports = {
    module: {
        rules: [
            {
              test: /\.(js|vue)$/,
              use: 'cache-loader',
              enforce: true
            }
        ]
    },
    devtool: 'cheap-source-map',
    output: {
        pathinfo: false
    },
    optimization: {
        minimize: true,
        minimizer: [
            new TerserPlugin({
                test: /\.js(\?.*)?$/i,
                cache: true,
                sourceMap: true,
                parallel: true,
                terserOptions: {
                    safari10: true,
                    compress: {},
                    mangle: true
                }
            })
        ]
    },
}

五、結語

使用Vue SourceMap可以大大提高開發效率，幫助我們快速定位代碼錯誤。同時，為了避免對性能的影響，需要採取一定的優化措施。