Webpack性能优化系列之 source-map
yuanyuanbyte opened this issue · 0 comments
本系列的主题是 Webpack,每期讲解一个技术要点。如果你还不了解各系列内容,文末点击查看全部文章,点我跳转到文末。
如果觉得本系列不错,欢迎 Star,你的支持是我创作分享的最大动力。
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(性能更好)
参考
博文系列目录
- JavaScript 深入系列
- JavaScript 专题系列
- JavaScript 基础系列
- 网络系列
- 浏览器系列
- Webpack 系列
- Vue 系列
- 性能优化与网络安全系列
- HTML 应知应会系列
- CSS 应知应会系列
交流
各系列文章汇总:https://github.com/yuanyuanbyte/Blog
我是圆圆,一名深耕于前端开发的攻城狮。