一、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来自动设置，开发环境开启，生产环境关闭。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/188425.html
