webpack 中 sourcemap 的作用与使用场景分析

我们使用 react vue 的脚手架打包代码，打包后的包体积会很大，查看编译后的文件，会生成.map文件，而且文件资源较大，那么怎么优化这个文件资源，将包体积尽可能减小呢，查阅文档发现sourcemap的配置决定了这个关系。

无论是 react 还是 vue 的脚手架都是通过 webpack 来进行构建的，sourcemap 只是优化打包体积的一种方式，实际上还有很多方式可以优化打包大小，这里着重分析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：是否精确到行的第几列，且只针对业务代码做映射
inline：sourceMap 文件是否打包为单独的文件
eval：会以eval的js形式生成映射关系，直接指向映射的js文件，效率最高
module：是否处理第三方模块的文件

建议使用：
开发环境：devtool：cheap-module-eval-source-map
生产环境：devtool：cheap-module-source-map

如果认为可以不用，直接配置develop：false ，代码体积最小