【Webpack 性能优化系列(2) - source-map】

webpack系列文章:

source-map

本文讲一下开发环境下如何调试代码,解决开发环境下调试代码问题,这个技术叫source-map

source-map: 一种 提供源代码到构建后代码映射 技术 (如果构建后代码出错了,通过映射可以追踪源代码错误)

在webpack中启动source-map只需要在配置中添加:devtool: 'source-map'
在这里插入图片描述
启动source-map后,打包运行就可以在build目录下看到built.js.map,这个文件就是source-map文件,它提供了源代码和构建后代码的映射关系
在这里插入图片描述
在这里插入图片描述
上面的写法是source-map最基本的写法

devtool的模式写法可以总结为:[inline-|hidden-|eval-][nosources-][cheap-[module-]]source-map

具体就是有以下几种模式:

1.source-map:外部

错误代码准确信息 和 源代码的错误位置

2.inline-source-map:内联

只生成一个内联source-map

错误代码准确信息 和 源代码的错误位置

3.hidden-source-map:外部

错误代码错误原因,但是没有错误位置

不能追踪源代码错误,只能提示到构建后代码的错误位置

4.eval-source-map:内联

每一个文件都生成对应的source-map,都在eval

错误代码准确信息 和 源代码的错误位置

5.nosources-source-map:外部

错误代码准确信息, 但是没有任何源代码信息

6.cheap-source-map:外部

错误代码准确信息 和 源代码的错误位置

只能精确的行

7.cheap-module-source-map:外部

错误代码准确信息 和 源代码的错误位置

module会将loader的source map加入


上述这些模式,其中一些值适用于开发环境,一些适用于生产环境。对于开发环境,通常希望更快速的 source map,需要添加到 bundle 中以增加体积为代价,但是对于生产环境,则希望更精准的 source map,需要从 bundle 中分离并独立存在。

我们看一下效果:

devtool: 'inline-source-map'

构建后没有built.js.map文件
在这里插入图片描述
但是会在built.js文件下面生成base64编码的source-map文件
在这里插入图片描述
这种方法是嵌到js中的,所以叫内联,像前面生成外部built.js.map文件的叫外联

内联 和 外部的区别:1. 外部生成了文件,内联没有 2. 内联构建速度更快

应用场景

前面讲了source-map的很多种配置方案,到底怎么用呢?

这里就需要考虑两种环境:开发环境和生产环境

开发环境:速度快,调试更友好

速度快(eval>inline>cheap>…):
eval-cheap-souce-map(首推)
eval-source-map

调试更友好:
souce-map(首推)
cheap-module-souce-map
cheap-souce-map

最终平衡速度和调试,开发环境推荐的方案:
eval-source-map(调试最友好)
eval-cheap-module-souce-map(性能更好)

如果我们使用vue或者react框架开发,都会有对应的脚手架,而脚手架的配置默认是:eval-source-map

生产环境:源代码要不要隐藏? 调试要不要更友好?

内联会让代码体积变大,所以在生产环境不用内联

需要隐藏源代码的方案:
nosources-source-map(全部隐藏)
hidden-source-map(只隐藏源代码,会提示构建后代码错误信息)

生产环境推荐方案:
source-map(调试最友好)
cheap-module-souce-map(性能更好)

参考

  • https://www.bilibili.com/video/BV1e7411j7T5?p=14&spm_id_from=pageDriver
  • https://webpack.docschina.org/configuration/devtool/
  • 0
    点赞
  • 0
    收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:游动-白 设计师:我叫白小胖 返回首页
评论

打赏作者

圆圆01

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值