webpack开发环境性能优化之优化代码调试-source-map(1)

于 2024-04-18 11:14:38 发布
阅读量248 收藏 7
点赞数 4
分类专栏： 2024年程序员学习 文章标签： webpack 前端 node.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_84140463/article/details/137913455
版权

先自我介绍一下，小编浙江大学毕业，去过华为、字节跳动等大厂，目前阿里P7

深知大多数程序员，想要提升技能，往往是自己摸索成长，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年最新Web前端全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友。
img
img
img
img
img
img

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

如果你需要这些资料，可以添加V获取：vip1024c （备注前端）
img

正文

source-map是一种提供源代码到构建后代码的映射技术

如果构建后代码出错，会通过映射关系追踪源代码错误

在webpack.config.js中加入

devtool:‘source-map’,

重要的是source-map的构建参数

[inlie-|hidden-|eval-][nosources-][cheap-[module-]]source-map

前面有三个可选的参数位置

image-20200729235626958

source-map：会生成built.js.map的一个映射文件

inline-source-map：内联，映射文件的代码会内嵌在构建后的built.js的末尾

hidden-source-map：会生成外部的built.js.map，但是在浏览器的source中会隐藏webpack://，不隐藏构建后代码

eval-source-map：也是内联的source-map，但是都会追加在built.js的每个模块引入的eval中

nosources-source-map：生成在外部，但是在浏览器的source中会隐藏我们的js源代码（有路径），构建后的js代码也看不见

cheap-source-map：生成在外部，和source-map类似但是错误提示到整行而不是整句，会受到babel的影响

cheap-module-source-map：生成在外部，和source-map类似但是错误提示到整行而不是整句，不会收到babel的影响

内联和外部的区别：外部会多生成文件，内联的构建速度会快

  1. 开了source-map之后，如果print.js出现某种错误会告诉你出错在源代码的哪里可以精确到文件的行和列

image-20200729225452523

image-20200729225753510

看视频里弹幕的老哥说不加source-map也会提示我特意关了去试试看，（好像真的一样

但是，有些情况下，点击后面的跳转是不一样的，因为这些非语法错误，而是执行错误的部分，在非source-map的情况下跳转到的是一个eval的执行内容，而使用了source-map虽然提示一样但是跳转的确实是源代码的样子

image-20200729230345446

image-20200729230520659

  1. inline-source-map和source-map的执行效果是完全一致的只是映射的代码文件一个在.map文件中一个是内嵌在构建后的built.js中

  2. hidden-source-map执行到错误后隐藏了错误源代码的位置，指挥提示原因和构建后代码的报错位置，相较于我们的default状态，他更不会暴露我的源代码

image-20200729230832717

  1. eval-source-map相较于inlinie-source-map在控制台的报错信息末尾会多出一个hash值，对于我们跳转去观察源代码没有影响，跳转之后观察下图中的路径

image-20200729231050784

image-20200729231249658

  1. 使用nosources-source-map，会在控制台提示报错的位置和原因，但是不暴露位置sources中的webpack://下的任何代码（即我们的源代码），和hidden-source-map模式不同的是hidden模式压根就不会出现webpack://的source路径和任何js文件代码，但是nosources-source-map只是引用不到源代码的内容，路径是构建好的

image-20200729230345446

image-20200729231516410

  1. cheap-source-map和正常的source-map相比只能精确到行，而正常的可以精确到列（不包括hidden和nosources的模式），cheap-source-map在使用babel-loader时会自动转译（转译后的源代码会独立格式化分行

image-20200729232742361

image-20200729232750992

  1. cheap-module-source-map也一样不会精确到列，好像是一样的，但是这个不会被babel-loader影响，而cheap-source-map在使用babel-loader时会自动转译（转译后的源代码会独立格式化分行)，因为module模式会把loader的sourcemap也加进来。

最后

为了帮助大家更好的了解前端，特别整理了《前端工程师面试手册》电子稿文件。

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化的资料的朋友，可以添加V获取：vip1024c （备注前端）
img

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

需要这份系统化的资料的朋友，可以添加V获取：vip1024c （备注前端）
[外链图片转存中…(img-EztxY9d7-1713410067224)]

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

2401_84140463
关注
  • 4
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【前端】隐藏VUE打包后的webpack目录
非晓为骁的博客
02-22 1622
在web项目的vue.config.js添加，上生产一定要加 productionSourceMap: false
在项目中安装、使用less-loader、less用于处理less格式文件
qq_46112274的博客
02-15 7904
在项目中安装、使用less-loader、less用于处理less格式文件1、安装配置2、配置3、案例：使用less-loader和less 在项目中安装less-loader，用于加载less文件 webpack中文网安装less-loader参考 1、安装配置 版本号与项目中webpack版本要对应，不然安装不成功 如果安装过程中，出错先使用以下命令： 出错参考 npm i --legacy-peer-deps 使用命令安装less-loader和less: npm install --save-de
vue-cli脚手架: less-loader插件的安装配置
酷伊奥
07-20 6803
一、降低npm版本 npm install npm@3.8.6 -g 二、loader - 配置处理less文件的loader 1、安装less npm install less --save-dev 2、安装less-loader（ 这里需要指定版本，不能太高，如果太高后续容易报错。后面解答报错问题 ） npm install less-loader@6.0.0 --save-dev ...
Chrome安装Vue插件vue-devtools
专注java二开部署
03-27 2193
除了作为 Chrome 扩展程序运行外，Vue Devtools 还提供了一个独立的桌面应用，支持更多的功能和更丰富的界面。通过在开发者工具中启用性能记录，并在 Vue Devtools 中查看分析，你可以了解组件渲染的耗时，找出性能瓶颈。现在，你应该能在开发者工具中看到一个名为 "Vue" 的新标签页，这就是 Vue Devtools 的主界面。如果你的应用使用了 Vuex 作为状态管理库，Vue Devtools 会提供一个专门的 Vuex 标签页，用于查看和调试 Vuex store 的状态变化。
关闭eslint - vue篇
阿莹yes的博客
05-22 4254
我们在开发vue项目的时候，创建的时候可能会不小心选择了eslint，这个检测规则对于新手来说，简直就是噩梦，会让你崩溃。这些方法基本足以解决这个问题了，但是笔者还是建议各位有了一定开发经验的时候，用上这个检测文件，不仅能培养自己良好的编程习惯，而且容易和团队其他人保持一个风格。上图红框框部分，我项目中的文件内容是这样的，其他项目可能有别的一些内容，我们把框框中的内容注释掉或者去掉就可以了。有这个文件的话，就直接修改这个文件就可以解决。文件，把你不需要校验的文件添加进去即可，文件都不进行校验了，同理，
less less-loader
weixin_42579969的博客
01-19 349
less 是一种 CSS 预处理器，它允许使用变量、函数、嵌套等高级功能来编写 CSS 代码。less-loader 是 Webpack 的一个模块加载器，用于在 Webpack 中使用 less。它可以将 less 文件转换为 CSS 代码并加载到页面中。 ...
详解vue-cli之webpack3构建全面提速优化
08-28
- 在开发环境中，为了更快的构建速度，可以将 devtool 设置为 'eval'。而在生产环境中，关闭 source map（设置 productionSourceMap: false）可以进一步提升构建速度，但同时也降低了调试的便利性。 除了以上方法...
浅谈webpack 构建性能优化策略小结
08-27
在生产环境中，可以使用`cheap-module-source-map`或`hidden-source-map`，平衡性能和调试能力。 8. **避免不必要的文件扫描**： 可以通过`resolve.modules`配置，限制webpack搜索模块的路径，减少文件遍历。 ...
深入理解基于vue-cli的webpack打包优化实践及探索
10-16
- **开启 Source Map**：在开发环境中开启 Source Map，方便调试；在生产环境中关闭，减小文件体积。 - **Tree Shaking**：启用 ES6 语法和模块化，配合 Webpack 的 Tree Shaking，移除未使用的代码。 - **动态...
Node.js-使用webpack搭建基于typescript的node开发环境template
08-10
本教程将深入探讨如何使用Webpack搭建一个基于TypeScript的Node.js开发环境。Webpack是一个模块打包工具，它能够处理JavaScript、CSS、图片等静态资源，而TypeScript是JavaScript的一个超集，提供静态类型系统，增强...
source-map-support:npm 包 source-map-support 的包装器
07-16
通过安装并启用`source-map-support`，即使在生产环境中，开发者也能获得类似开发环境的调试体验。 标签“JavaScript”表明这个库是专为JavaScript开发设计的，适用于Node.js环境以及现代浏览器。这意味着无论是在...
layui分页 选择limits每页多少条后重新渲染页面
一枚不断学习的小码农一枚~
04-12 1万+
layui分页 选择limits每页多少条后重新渲染页面 1.引用注册分页组件 2.定义分页渲染方法 3.定义触发分页组件后的回调，重新调用分页渲染方法 $(function () { let DataList = []; //存储表格列表数据 /* layui S */ layui.use(['element', 'form', 'laytpl', 'laypage', 'lay...
16个不容错过的VScode插件
weixin_52740695的博客
01-19 4705
VSCode。
vue使用Bootstrap的详细方法
一步一个脚印，踏实努力，向着目标前进
08-24 9709
或者main.jsmain.js这将导入Bootstrap的CSS文件，使您可以在Vue组件中使用Bootstrap的样式。在上面的示例中，我们在Vue组件的模板中使用了Bootstrap的按钮组件。按钮的样式类名是。请注意，您可能还需要在Vue组件中导入其他Bootstrap的JavaScript文件，以便使用一些需要JavaScript支持的组件，如弹出框、标签页等。您可以在需要使用这些组件的Vue组件中导入相关的JavaScript文件。
【uniapp小程序】路由跳转navigator传参封装
热门推荐
qq_49002903的博客
11-29 4万+
在实际应用开发中我们经常要使用到路由跳转，在uniapp官网中，提供了navigator内置组件，供我们使用。navigator页面跳转。页面跳转。该组件类似HTML中的组件，但只能跳转本地页面。目标页面必须在pages.json中注册。该组件的功能有API方式，另见：https://uniapp.dcloud.io/api/router?属性说明属性名类型默认值说明平台差异说明urlString。
关于vue项目中添加less，less-loader不能运行的问题
inticaler的博客
01-06 1228
在vue项目中，我们通常会在style样式中引用less，这样我们就需要下载less和less-loader依赖包， 运行命令 npm install less less-loader --save npm install less less-loader --save 安装完成之后再运行 npm run dev ,发现，项目卡住，运行不起来了，也不报错。 查看less-loader的版本发现，可能是因为less-loader的版本太高了，再重新安装一下。 卸载最高版本的less-loader
在Vue2中引入less
weixin_68854196的博客
08-07 2984
在Vue2中引入less
layui分页 选择limits每页多少条后重新渲染页面，2024年最新程序员的面试题
最新发布
m0_61072747的博客
04-15 761
/obj为所有关于分页的参数,执行func时传递obj,first,res三个参数。hash: ‘page’, //hash名，如果填写，则开启location.hash。== req.limit) {// 如果条数更改。currPage = obj.curr // 将更改条数的页码赋值给当前页。limit: obj.limit // 更改后的分页条数。limit: req.limit, //每页显示的条数。limit: limit, //每页显示的条数。curr: req.page, // 当前页。
小程序、页面、自定义组件生命周期 navigator-opentyp
xiao_yuanyuan_20的博客
06-13 302
微信小程序 中的 生命周期 生命周期：就是定义好的方法，就像我们自己定义的方法一样；不过不是由我们来控制的，而是定义好的，有一定触发顺序的。 1，小程序的生命周期 //小程序的生命周期 app.js是小程序的入口文件， 在此页面中 小程序是APP(){} APP({ //1，小程序第一次打开的时候执行的生命周期函数 onLanch(){ } //2，小程序显示的时候触发 onShow(){} //3,小程序隐藏时候触发 onHide(){}
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值