likes
comments
collection
share

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

作者站长头像
站长
· 阅读数 21

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

背景

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

先看造成的体积影响有大

已去掉 sourcemap 的线上版本：

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

没去掉 sourcemap 的线上版本：

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

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

如何确定js内是否有sourcemap？

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

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

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即可）

码字不易，点赞鼓励！ 细节决定成败/