什么是Source Map

什么是Source Map

在日常开发过程中,我们编写的源代码通过多重处理(编译,封装,压缩…),最后形成的产物代码,在浏览器中调试时,我们会发现代码变得面目全非,根本没办法调试。
因此,我们需要一种将产物代码回溯到源代码的功能,Source Map就是实现这一功能的工具。
Source Map的基本原理是,在编译过程中,在生成产物代码的同时也生成基于源代码的一份映射关系表。有了这张映射关系表,我们就可以通过 chrome 控制台中的“Enable JavaScript source map”来实现调试时的显示与定位源代码的功能。
生成Source Map的方式有很多种,他们的构建速度、质量(反解代码与源代码的接近程度以及调试时行号等辅助信息的对应情况)、访问方式(在产物文件中或单独生成 source map)、文件大小都各不相同。在开发和生成环境下我们对 source map 的期望也有所不同。

  • 在开发环境中,我们更关心构建速度、质量,以便于提升开发效率,而不关心文件大小与访问方式
  • 在生产环境中,我们更关注的是,是否需要开启 source map,生成文件的大小和访问方式是否对页面性能造成影响,其次才是质量和构建速度。
阅读更多
什么是热更新?

什么是热更新?

看到浏览器热更新,我们很容易就想到的是webpackwebpack-dev-server
问题:热更新是保存后自动编译(Auto Compile)吗?还是自动刷新浏览器(Live Reload)?还是指HMR(Hot Module Replacement,模块热替换)?
先看一下什么是浏览器的热更新。浏览器的热更新,指的是我们在本地开发的同时打开浏览器进行预览,当代码发生变化时,浏览器自动更新页面的技术。这里的自动更新,表现上又分为自动刷新整个页面,以及页面整体无刷新而只更新页面的部分内容。

阅读更多
Window Terminal美化💖

Window Terminal美化💖

Window Terminal终端程序是一款新式、快速、高效、强大且高效的终端应用程序,适用于命令行工具和命令提示符,PowerShellWSLShell用户。
主要功能包括多个选项卡、窗格、Unicode、和UTF-8字符支持,GPU加速文本渲染引擎以及自定义主题、样式和配置

阅读更多
Chocolatey Window设计的包管理器
如何自定义切换Node源✨

如何自定义切换Node源✨

在我们使用nodejs进行安包时,常常使用淘宝镜像 https://registry.npm.taobao.org/ ,也是是cnpm源。
nodejs默认使用npm源,npm源在下载一些国外资源是速度比较慢,这个时候我们会考虑使用npm config全局配置cnpm源。
但由于我们有时候会有一些package放在自己的npm私服上面,我们可能需要在npm cnpm 自己的npm源上面来回切换,这个时候我们使用npm config进行全局配置就略显麻烦了。所以我们使用nrm进行npm源的管理。

阅读更多
安装多个版本的node✨

安装多个版本的node✨

nodejs是前端经常使用到的,nodejs拥有很多版本,我们一般使用官方提供的稳定版本就好了,当然,如果你想体验一些新功能 新特性 可以使用最新版本的nodejs
在我们团队的协作中,因为有package.json的存在,所以我们尽量保证团队是用的nodejs版本一致。
这个时候我们就需要版本控制工具nvm了。

阅读更多
整理自己常用的vscode插件集合
Your browser is out-of-date!

Update your browser to view this website correctly.&npsb;Update my browser now

×