webpack优化系列(2)-sourceMap

最新推荐文章于 2024-07-24 16:02:15 发布
最新推荐文章于 2024-07-24 16:02:15 发布
阅读量552 收藏 3
点赞数 1
分类专栏： webpack配置以及优化 文章标签： webpack 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ysj1218/article/details/111643155
版权

如果构建后代码出错了，要想根据构建后的代码找到源代码哪个地方出错了进行修改，应该怎么实现呢？这个时候就出现了source-map。

source-map：一种提供源代码到构建后代码的映射技术（如果构建后代码出错了，会通过映射关系可以追踪到源代码的错误）

那么怎么实现呢？

在webpack.config.js中增加配置属性devtool

devtool: 'source-map'

那么构建完成后输出目录下会生成一个sourceMap文件（源代码到构建后代码的映射文件）比如：built.js.map()

devtool参数值有哪些？

  • source-map：

外部：构建完成后会生成一个map文件。

作用：如果构建后控制台报错，控制台会明确的提示到错误代码的准确信息 和 源代码的错误位置。
           能精确到行和列

  • inline-source-map

内联：就是直接在构建后的js文件中生成一个base64编码格式的sourceMap文件。只生成一个文件的内联source-map

作用：如果构建后控制台报错，控制台会明确的提示到错误代码的准确信息 和 源代码的错误位置。
           能精确到行和列

  • hidden-source-map

外部：和source-map一样，会生成map文件，但是不会在bundle末尾追加注释

作用：如果构建后控制台报错，会提示错误代码的错误原因，但是不能追踪到源代码的错误位置，只能追踪到打包后文件中代码的错误位置。
           是为了隐藏源代码，为了代码安全。

  • eval-source-map

内联：每一个文件都生成对应的source-map，都在eval中

作用：如果构建后控制台报错，控制台会明确的提示到错误代码的准确信息 和 源代码的错误位置。                                                                                                                       能精确到行和列。

eval 是一个函数，用于执行字符串中的js代码。

  • nosources-source-map

外部

如果构建后控制台报错，能找到错误代码准确信息，但是点击进去没有任何代码信息。
是为了隐藏源代码，为了代码安全。

  • cheap-source-map

外部

如果构建后控制台报错，控制台会明确的提示到错误代码的准确信息 和 源代码的错误位置。
但是只精确到行

  • cheap-module-source-map

外部。

如果构建后控制台报错，控制台会明确的提示到错误代码的准确信息 和 源代码的错误位置。
module会将loader的source-map也加入

内联和外联的区别

  • 外部另外生成了一个map文件。内联没有，是嵌套在boudle里面；
  • 内联构建速度更快

总结

开发环境要求：速度快，调试更友好

速度快：(eval>inline>cheap ...)     eval-cheap-source-map > eval-source-map

调试更友好：source-map > cheap-module-source-map > cheap-source-map

综合来说用：eval-source-map(调试更友好) > eval-cheap-module-source-map（性能更友好）

生产环境要考虑：源代码要不要隐藏？调试要不要友好？内联会让代码体积变的很大，所以不考虑内联

隐藏源代码： hidden-source-map(只隐藏源代码，会提示构建后代码错误信息) > nosources-source-map (全部隐藏代码信息)

调试好： source-map

综合来说用：source-map > cheap-module-source-map

系列相关

Sunsine_C
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
webpack系列 —— 性能优化篇
七月
11-30 453
一 压缩图片和css 压缩图片 image-webpack-loader 来压缩图片文件 // image-webpack-loader 使用 imagemin 来进行压缩 use: [ 'file-loader', // 需要在file-loader之后添加 image-webpack-loader { loader: 'image-webpack-loader', options: { // 压缩 jpg
前端开源库-webpack-uglify-js-plugin
08-30
4. `sourceMap`: 是否生成source map，便于调试。 5. `uglifyOptions`: UglifyJS自身的选项，如`compress`（压缩配置）、`mangle`（混淆配置）等。 **四、压缩与混淆策略** 1. **压缩策略**：`compress`选项可以...
【Webpack 性能优化系列(2) - source-map】
圆圆的 JavaScript 博客
08-31 1094
开发环境下如何调试代码，解决开发环境下调试代码问题，这个技术叫`source-map`，`source-map`: 一种 提供源代码到构建后代码映射 技术 （如果构建后代码出错了，通过映射可以追踪源代码错误）
2024年最全webpack开发环境性能优化之优化代码调试-source-map，面试必问知识点
2401_84620143的博客
05-07 756
秋招即将开始，校招的朋友普遍是缺少项目经历的，所以底层逻辑，基础知识要掌握好！而一般的社招，更是神仙打架。特别强调，项目经历不可忽视；几乎简历上提到的项目都会被刨根问底，所以项目应用的技术要熟练，底层原理必须清楚。这里给大家提供一份汇集各大厂面试高频核心考点前端学习资料。涵盖HTML，CSS，JavaScript，HTTP，TCP协议，浏览器，Vue框架，算法等高频考点238道（含答案）！开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】高级前端工程师必备资料包。
webpack优化系列六：vue项目配置 terser-webpack-plugin 压缩 JS，去除console
hyduan_h5的博客
10-17 5384
代码打包后，开发中写的很多打印信息或者断点，都会带上去，即影响美观，又影响性能，而生产大多不需要，故而需去除；插件使用来压缩 JavaScript。我们项目主要用来去除生产环境中的console以及debugger等信息。通过查阅后，经测试此方法可行，故记录，以便后续查看。网站推荐：https://www.npmjs.com/package/terser-webpack-pluginwebpack其他相关给、推荐一：webpack优化相关。
webpack优化系列(1)-HMR
ysj1218的博客
12-23 380
webpack优化要做哪些方面呢？ 开发环境性能优化 优化打包构建速度 优化代码调试 生产环境性能优化 优化打包构建速度 优化代码运行性能（提高用户体验） 那么怎么实现优化呢？以下是我的学习，仅供参考~ 场景一 当我们修改样式文件，实际上js文件也被重新打包了。假如项目体积很大，我们修改某一个css文件，那所有的模块都要被重新编译，会导致构建很慢，这个时候我就就要实现改哪个模块的只更新编译对应的模块即可，那么怎么实现呢？ 这个时候可以用到HMR，下面我们先来了解一下什么是HMR，有什么作用.
重构Webpack系列之六 ---- 配置文件
LizequaNNN的博客
01-07 967
重构Webpack系列之六 ---- 配置文件 一、基本用法 webpack的配置文件不尽相同。这是因为webpack的配置文件是JavaScript文件，文件内导出了一个webpack配置的对象，然后webpack会根据该配置定义的属性进行处理。 本文的结论是，webpack的配置可以有许多不同的样式和风格。关键在于，为了易于维护和理解这些配置，需要再团队内部保持一致。 a.基本配置 const path = require('path'); module.exports = { mode:
webpack优化系列(8)-PWA
ysj1218的博客
03-01 425
PWA是什么？ (Progress web apps) 渐进式网络开发应用程序(离线可访问，比如淘宝)。 那么webpack中怎么配置实现PWA功能呢？ 一般使用workbox来实现（谷歌开源的项目）==> workbox --> workbox-webpack-plugin一般设置eslint后构建后会有问题：eslint不认识window、navigator全局变量 解决办法： eslintConfig: { env: { browser: true.
webpack优化系列(11)-dll
ysj1218的博客
03-02 389
dll是什么？ 类似于externals，指使哪些库是不需要打包的。和externals区别在于 dll 会单独的对某些库进行单独打包，将多个库打包成一个chunk。 那么它有什么意义呢？ 正产情况下一个项目下 node_modules 里面的包会打包成一个chunk，但是第三方库很大，打包成一个chunk文件体积过大。所以通过 dll 将所有库进行单独打包成不同的chunk，更加有利于我们的性能优化，提高构建速度。 使用dll技术对某些库(第三方库：jquery，react，vue...)进
学习webpack系列之四 ---- （学习开发环境）
LizequaNNN的博客
09-29 331
学习webpack系列之四 ---- （学习开发环境） 本章所用的代码继续沿用上一章（输出管理）的代码。 在开始之前我们要想想，为什么要了解webpack的开发环境？ 其实很简单，自动化打包工具就是为我们的开发提供便利的。之前的几个章节讲的都是比较基础的一些功能以及用法，我们的目的就是要在开发的过程中尽可能的提高工作效率，所以我们有必要来学习他的一个开发环境的配置。 OK准备好了我们就开始！ 一、开发环境MODE mode有三个参数：none，development，production。如果没有设置
前端工程化之 Webpack 5 项目构建优化
qq_23935353的博客
12-22 1760
一个项目的构建的性能优化，主要是从构建时间和构建体积这两个方面入手。 ○ 缩减与指定编译范围、提前与缓存构建、并行构建 ○ 分割代码、摇树优化、动态垫片、按需加载、作用提升、压缩资源
webpack-screencast-slides
05-02
9. **Source Map**：Webpack 支持生成 Source Map，使得在生产环境中调试源代码变得可能。 通过深入学习和实践 "webpack-screencast-slides" 中的内容，你将能够更好地理解和运用 Webpack，提高前端项目的构建效率...
前端开源库-webpack-wrapper-common
08-30
- **优化**：可能包含了代码压缩、去除未使用的代码、生成Source Map等功能，以提升生产环境的性能。 Webpack-Wrapper-Common-master可能是该项目的源码仓库，其中包含详细的README文件，指导用户如何使用和定制该...
vue webpack打包优化操作技巧
11-30
7. **优化Webpack配置**：减少不必要的Loader和Plugin，避免在生产环境中启用开发相关的配置，如热模块替换、SourceMap等。 8. **优化模块解析**：通过`resolve.modules`和`resolve.alias`配置，减少模块解析的时间...
webpack 2的react开发配置实例代码
08-29
在React应用中，Webpack 2 的配置尤其重要，因为它可以帮助开发者有效地管理和优化项目资源。 本文将深入探讨如何配置Webpack 2 以支持React开发。首先，我们需要安装必要的依赖，包括 `webpack`、`webpack-dev-...
某矿webpack逆向
screamn的博客
07-23 431
本篇博文的初衷是分享自己学习逆向分析时的个人感悟，所涉及的内容仅供学习、交流，请勿将其用于非法用途！！！任何由此引发的法律纠纷均与作者本人无关，请自行负责！！！推荐文章： WebPack webpack是JavaScript应用程序的模块备份器，可以把开发中的所有资源（图片、js文件、css文件等）都看成模块，通过loader（加载器）和plugins（插件）对资源进行处理，备份成符合生产环境部署的前端资源。所有的资源都是通过JavaScript渲染出来的。​ 扣取代码 抓包发现每次请求都需要先请求一个pu
node后端项目使用webpack打包教程，target: “node“
liangzhenmeng的博客
07-23 4707
webpack 能够为多种环境 或 target构建编辑。想要理解什么是target的详细信息。告知 webpack 为目标(target)指定一个环境。默认值为，如果没有找到的配置，则默认为web。
【React】路由懒加载
最新发布
小秀的博客
07-24 293
路由懒加载的原理是基于 ES6 的动态 import 特性，通过在 Webpack 打包时使⽤ React.lazy() 和 Suspense 进⾏懒加载，当路由被匹配时才会加载对应的组件。使⽤ React Router 进⾏⻚⾯路由时，将⻚⾯组件按需加载，⽽不是⼀次性加载所有⻚⾯组件。
webpack webpack-cli webpack-dev-server配置
08-16
npm install webpack webpack-cli webpack-dev-server --save-dev ``` 4. 在项目根目录下创建一个`webpack.config.js`文件，并添加以下基本配置： ```javascript const path = require('path'); module....
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值