webpack 中 sourcemap 的作用與使用場景分析

我們使用 react vue 的腳手架打包代碼，打包后的包體積會很大，查看編譯后的文件，會生成.map文件，而且文件資源較大，那么怎么優(yōu)化這個文件資源，將包體積盡可能減小呢，查閱文檔發(fā)現(xiàn)sourcemap的配置決定了這個關系。

無論是 react 還是 vue 的腳手架都是通過 webpack 來進行構建的，sourcemap 只是優(yōu)化打包體積的一種方式，實際上還有很多方式可以優(yōu)化打包大小，這里著重分析sourcemap

那么什么是sourcemap呢，它的作用是什么

Source map就是一個信息文件，里面儲存著位置信息。它是一個映射關系，如果代碼報錯，引入后可以清晰的知道源代碼的報錯位置。
目前，暫時只有Chrome瀏覽器支持這個功能。在Developer Tools的Setting設置中，確認選中"Enable source maps"。

在webpack中，sourcemap是在webpack.config.js中進行配置的

const path = require('path');

module.exports = {
    mode: 'development',
    devtool: 'cheap-module-eval-source-map',  // sourcemap配置
    entry: {
        main: './src/index.js'
    },
    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, 'dist')
    }
}

devtool的相關文檔在https://webpack.js.org/configuration/devtool/

微信截圖_20201208105505.png

我們簡單進行介紹

cheap：是否精確到行的第幾列，且只針對業(yè)務代碼做映射
inline：sourceMap 文件是否打包為單獨的文件
eval：會以eval的js形式生成映射關系，直接指向映射的js文件，效率最高
module：是否處理第三方模塊的文件

建議使用：
開發(fā)環(huán)境：devtool：cheap-module-eval-source-map
生產環(huán)境：devtool：cheap-module-source-map

如果認為可以不用，直接配置develop：false ，代碼體積最小