性能优化之不可忽视的sourcemap体积

·  阅读 1104
性能优化之不可忽视的sourcemap体积

性能优化之不可忽视的sourcemap体积

背景

在做性能优化时,本以为线上版本要去掉sourcemap这种基本操作,肯定是已经做了的。但没想到,我们的项目中,也存在很多项目线上版本sourcemap还没去掉的情况...

先看造成的体积影响有大

已去掉 sourcemap 的线上版本:

  • image.png

没去掉 sourcemap 的线上版本:

  • image.png

很明显,如果线上版本没去掉sourcemap的话,js体积会变的非常大,会导致下载和解析都变慢!

如何确定js内是否有sourcemap?

随意打开一个js文件,搜索关键字 “ sourceMappingURL ”。 如果看到类似以下的代码,那就说明里面含了sourcemap

image.png

webpack默认会加上sourcemap吗?

dev环境的包,默认会加上

prd环境的包,默认会去掉sourcemap

但为什么有些项目内的prd环境的包会有sourcemap呢?

我觉得可能有以下几个原因

  1. 为了线上环境排错,手动加上 prd环境的sourcemap。之后又没删掉

    1. 可能确实没有意识到sourcemap会带来的体积变大,因为sourcemap并不影响程序正常运行,只是加载速度会慢一些
  2. 某些错误监控平台(类似 sentry 这种),会要求上传sourcemap,这样可以得到js error的执行栈,有利于排查错误

我们内部主要就是第2个原因... 其实可以通过配置解决这个问题,可以做到既上传sourcemap,又不会让prd的包 包含sourcemap

  • (原理也很简单,就是run build时,先生成sourcemap,然后把sourcemap上传到对应平台,上传完后删除build包内的sourcemap即可)

码字不易,点赞鼓励! 细节决定成败/

收藏成功!
已添加到「」, 点击更改