vue项目打包体积大优化之-productionSourceMap设置

一、productionSourceMap 的作用

productionSourceMap 在构建时生成完整的 SourceMap 文件，默认情况下开启。生产环境中启用 productionSourceMap 有助于开发者调试代码，可以在浏览器的调试工具中查看到源文件中错误的代码位置，而不是编译后的代码位置。这对于定位线上问题十分有帮助。

然而，开启 productionSourceMap 会使得构建后的代码包含源代码映射关系，导致构建后的代码文件体积增大。体积增加会影响页面加载速度，而且源代码也存在泄漏的风险，因此有些开发者会选择在生产环境中禁用 productionSourceMap。

我们在执行 npm run build 生成线上文件的时候，其实调用了 vue-cli-service build

productionSourceMap的作用在于定位问题，打包时会生成.map文件，在生产环境就可以在浏览器查看到输出的信息具体是在哪一行，但相应的包的体积也会变大，将其设置为false则不生成.map文件。

二、禁用 productionSourceMap

禁用 productionSourceMap 后，会对静态资源的定位产生影响，需要手动配置 webpack.

要想引入其它静态资源（比如图片、字体等），需要将资源放到静态资源目录（static）下，然后使用相对路径引用即可。或者使用 require 和 import 引入的静态资源，也可以通过相对路径来引入。

自己的项目在开启productionSourceMap是打包后dist目录文件大小，约为20M左右。

三、关闭 productionSourceMap

module.exports = defineConfig({
  productionSourceMap: false,
})

优化后，打包后dist目录文件大小，约为6M左右。一下子减少14MB。

四、配置 productionSourceMap

在 Vue 项目中，可以运用环境变量来控制生产环境下是否启用 productionSourceMap 属性。还是在 configureWebpack 中，可以使用 对象来获取环境变量

module.exports = defineConfig({
  productionSourceMap: process.env.VUE_APP_MODE === 'development'?true:false,
})

通过环境变量process.env来自动设置，开发环境开启，生产环境关闭。