Webpack性能优化系列之 source-map #38
Assignees
Comments
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
{{ message }}
本系列的主题是 Webpack，每期讲解一个技术要点。如果你还不了解各系列内容，文末点击查看全部文章，点我跳转到文末。
如果觉得本系列不错，欢迎 Star，你的支持是我创作分享的最大动力。
source-map
本文讲一下开发环境下如何调试代码，解决开发环境下调试代码问题，这个技术叫
source-mapsource-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-mapcheap-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(性能更好)参考
查看全部文章
博文系列目录
交流
各系列文章汇总：https://github.com/yuanyuanbyte/Blog
我是圆圆，一名深耕于前端开发的攻城狮。
The text was updated successfully, but these errors were encountered: