一、概述

Vue.js是一套構(gòu)建用戶界面的漸進式框架，通過HTML模板或者直接寫render函數(shù)可以快速開發(fā)單頁應(yīng)用。

在開發(fā)過程中，很多時候我們需要調(diào)試代碼，追蹤錯誤。

Vue官方提供了SourceMap技術(shù)，可以幫助我們在錯誤提示信息中直接鏈接到源代碼，從而更方便地進行調(diào)試。

在打包壓縮后的JS代碼里，有時很難找到錯誤發(fā)生的位置。

SourceMap是一種映射關(guān)系文件，其中包含了壓縮前和壓縮后的代碼的位置，這個文件可以幫助我們?nèi)ザㄎ淮a的真實位置。

二、使用方法

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

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

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

module.exports = {
    productionSourceMap: true
}

在代碼打包后，壓縮的JS文件會攜帶SourceMap文件一同發(fā)布到服務(wù)器。

如果你需要禁用它，只需將productionSourceMap設(shè)置為false。

三、生成SourceMap

在開發(fā)過程中，我們可以在webpack的配置文件中設(shè)置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文件。

四、優(yōu)化

然而，開啟SourceMap會導(dǎo)致一些性能問題，開發(fā)者可以通過一些優(yōu)化配置來減輕這些性能問題。

webpack提供了內(nèi)聯(lián)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
                }
            })
        ]
    },
}

五、結(jié)語

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

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

最新評論