性能优化之不可忽视的sourcemap体积
性能优化之不可忽视的sourcemap体积
背景
在做性能优化时,本以为线上版本要去掉sourcemap这种基本操作,肯定是已经做了的。但没想到,我们的项目中,也存在很多项目线上版本sourcemap还没去掉的情况...
先看造成的体积影响有大
已去掉 sourcemap 的线上版本:
没去掉 sourcemap 的线上版本:
很明显,如果线上版本没去掉sourcemap的话,js体积会变的非常大,会导致下载和解析都变慢!
如何确定js内是否有sourcemap?
随意打开一个js文件,搜索关键字 “ sourceMappingURL ”。 如果看到类似以下的代码,那就说明里面含了sourcemap
webpack默认会加上sourcemap吗?
dev环境的包,默认会加上
prd环境的包,默认会去掉sourcemap
但为什么有些项目内的prd环境的包会有sourcemap呢?
我觉得可能有以下几个原因
-
为了线上环境排错,手动加上 prd环境的sourcemap。之后又没删掉
- 可能确实没有意识到sourcemap会带来的体积变大,因为sourcemap并不影响程序正常运行,只是加载速度会慢一些
-
某些错误监控平台(类似 sentry 这种),会要求上传sourcemap,这样可以得到js error的执行栈,有利于排查错误
我们内部主要就是第2个原因... 其实可以通过配置解决这个问题,可以做到既上传sourcemap,又不会让prd的包 包含sourcemap
- (原理也很简单,就是run build时,先生成sourcemap,然后把sourcemap上传到对应平台,上传完后删除build包内的sourcemap即可)
码字不易,点赞鼓励! 细节决定成败/
转载自:https://juejin.cn/post/7133395389482270756