source-map如果直接打包到main.js里不会影响加载速度吗？

Question

打包后的文件一般来说会发布到线上啊，source-map如果直接打包到main.js里不会影响加载速度吗？
测试： ‘sheap-module-eval-source-map’ ，
体积： main.js : 57.4kb

测试：‘source-map’，
体积： main.js: 24kb,
main.js.map: 25kb,

Answer 1

Dell 2019-02-24 16:25:20

cheap-module-source-map 是线上环境的配置，会单独生成.map文件，这个文件你不要发布到线上，而是在线上有问题的时候，拿出来差错用的。而本地环境加上eval，会提升本地的打包速度。我感觉你是不是把线上环境和本地环境搞错了。

• 渴望做梦 #1

  老师，为啥不要把.map文件发布到线上呢？

• 提问者 洞庭兮木叶下 回复 渴望做梦 #2

  线上是生产环境…不需要看到错误信息在哪一行，这些信息你在开发的时候排查完就行了

• 渴望做梦 回复 提问者 洞庭兮木叶下 #3

  谢谢同学，可是如果部署了的话，线上出了问题，不是可以很容易定位吗

Answer 2

renderman 2019-02-24 09:18:11

我使用DellLee最佳实践后，得出的结果是这样的：

生产模式下，打包出来是bundle和map，两者是分离的。

mode: "production",

devtool: "cheap-module-source-map"

开发环境下，打包出来只有bundle，两者未分离。

mode: "development",

devtool: "cheap-module-eval-source-map"

在开发环境下，考量的是增量构建的速度吧，分离不分离对加载速度影响多少？

当然我也想知道，分离的使用场景是什么呢？

在生产环境下，分离能够限制访问类型，从而达到部分人能够看到源码的目的。

希指正。

• 提问者 洞庭兮木叶下 #1

  正常来说，.map文件并不会被浏览器加载，但是如果将source-map的内容打包到main.js里，main.js的体积会增大，如果是生产环境，是不是会影响app的性能呢，比如首次加载的时长？
  这个是我在之前写代码的时候也没考虑过都问题，比较好奇，希望dell老师能回复一下。

• Dell #2

  你说的非常的正确，这个回答应该被置顶

• weixin_慕姐4425141 回复 提问者 洞庭兮木叶下 #3

  同学 谢谢您的回答 我也挺好奇的 正常情况下浏览器确实没有加载map文件 那么浏览器是如何通过我们的map文件找到源码中的错误位置的呢？
  
  不好意思 后来在网上看到说 只有在浏览器debug的状态下才会加载哈！

点开查看后面1条评论