Vue中SourceMap的使用解讀

更新時(shí)間：2024年06月06日 10:03:38 作者：儒雅的烤地瓜

這篇文章主要介紹了Vue中SourceMap的使用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

一、概述

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

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

Vue官方提供了SourceMap技術(shù)，可以幫助我們?cè)阱e(cuò)誤提示信息中直接鏈接到源代碼，從而更方便地進(jìn)行調(diào)試。

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

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

二、使用方法

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

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

也可以通過vue.config.js文件中進(jìn)行配置：

module.exports = {
    productionSourceMap: true
}

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

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

三、生成SourceMap

在開發(fā)過程中，我們可以在webpack的配置文件中設(shè)置devtool選項(xiàng)。

這個(gè)選項(xiàng)配置webpack如何生成SourceMap。

以下是一些選項(xiàng)的示例：

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

這會(huì)生成一個(gè)外部的source-map文件，在每個(gè)JS文件的末尾添加一個(gè)sourceURL注釋。

這些sourceURL注釋指向source-map文件的位置。

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

這種配置方式比上面的選項(xiàng)更快，會(huì)忽略列信息，只有行信息。

它會(huì)生成一個(gè)外部的source-map文件。

只是這個(gè)文件生成的時(shí)候，只包含每個(gè)打包后的模塊的第一行。

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

這種選項(xiàng)生成一個(gè)base64-encoded inline sourcemap文件，類似于DataUrl。它不會(huì)生成外部的source-map文件。

四、優(yōu)化

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

webpack提供了內(nèi)聯(lián)WebWorker來生成SourceMap，同時(shí)可以使用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
                }
            })
        ]
    },
}