标签： JavaScript

发布于

Web前端开发中的.map文件的作用是什么？

我从Bootstrap的GitHub仓库下载了bootstrap-5.3.8-dist.zip文件，解压后发现如下文件：

  • bootstrap.js文件和bootstrap.js.map文件
  • bootstrap.css文件和bootstrap.css.map文件

其中.map文件的作用是什么？

.map 文件的全称是 Source Map（源映射文件），它是用于开发和调试目的的辅助文件。在 Bootstrap 的分发包（如 bootstrap-5.3.8-dist.zip）中，bootstrap.js.map 和 bootstrap.css.map 分别对应于 bootstrap.js 和 bootstrap.css 的源映射。

.map 文件的具体作用

  • 调试 minified 代码：Bootstrap 的 JS 和 CSS 文件通常会被压缩（minified），以减少文件大小和加载时间。但压缩后的代码（如 bootstrap.min.js 或 bootstrap.min.css）会变得难以阅读和调试。Source Map 文件就是一个“映射表”，它将压缩代码中的位置映射回原始的、未压缩的源代码（例如 Sass 或未 minified 的 JS）。这样，在浏览器开发者工具（如 Chrome DevTools 或 Firefox Developer Tools）中，你可以查看和调试原始代码，而不是乱七八糟的压缩版本。
  • 开发工具支持：当你启用浏览器的源映射功能时，它会自动加载这些 .map 文件，帮助你跟踪代码的来源。例如，在控制台或 Sources 面板中，你可以看到 Bootstrap 的 Sass 源文件结构，而不是单一行的压缩代码。这对前端开发者在排查问题时非常有用。

是否需要 .map 文件？

  • 开发环境中：推荐保留它们，因为它们能提升调试效率。
  • 生产环境中：你可以安全删除或不部署这些文件，因为它们不会影响网站的正常运行，只会让生产环境的调试稍显不便。通常，生产部署时会优先使用 minified 版本，而忽略 .map 文件以节省空间。

如果你在使用 Bootstrap 时遇到调试问题，记得在浏览器设置中启用源映射（例如 Chrome: DevTools > Settings > Sources > Enable JavaScript/CSS source maps）。

发布于

判断用户客户端浏览器设备的类型

方法一，在客户端浏览器中使用js代码判断

借助navigator对象：

  • navigator.userAgent浏览器信息
  • navigator.appName浏览器版本名称
  • navigator.appVersion浏览器版本号
  • navigator.language浏览器语言
  • navigator.platform浏览器平台

示例代码如下：

<script type="text/javascript">
console.log('浏览器信息：');
console.log(navigator.userAgent);
console.log('浏览器版本名称：');
console.log(navigator.appName);
console.log('浏览器版本号：');
console.log(navigator.appVersion);
console.log('浏览器语言：');
console.log(navigator.language);
console.log('浏览器平台：');
console.log(navigator.platform);

// 从navigator.userAgent即可判断用户客户端浏览器设备的类型
// test()方法用于检测一个字符串中是否匹配某个正则模式，以下代码的功能是当用户客户端设备的类型匹配Android或webOS或iPhone或iPod或BlackBerry时，就跳转到移动端m站，否则跳转到PC端网站
window.location.href=/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)?"phone.html":"pc.html";
</script>

方法二，在服务器端使用nginx判断

根据用户设备不同返回不同样式的站点，以前经常使用的是纯前端的自适应布局，但无论是复杂性和易用性上面还是不如分开编写的好，比如我们常见的淘宝、京东……这些大型网站就都没有采用自适应，而是用分开制作的方式，根据用户请求的 user-agent 来判断是返回 PC站点还是移动端站点。

首先在 /usr/share/nginx/html 文件夹下 mkdir 分别新建两个文件夹 PC 和 mobile，vim 编辑两个 index.html 随便写点内容。

cd /usr/share/nginx/html
mkdir pc mobile
cd pc
vim index.html   # 随便写点比如 hello pc!
cd ../mobile
vim index.html   # 随便写点比如 hello mobile!

然后和设置二级域名虚拟主机时候一样，去 /etc/nginx/conf.d 文件夹下新建一个配置文件 fe.sherlocked93.club.conf：

# /etc/nginx/conf.d/fe.sherlocked93.club.conf

server {
  listen 80;
server_name fe.sherlocked93.club;

location / {
root  /usr/share/nginx/html/pc;
    if ($http_user_agent ~* '(Android|webOS|iPhone|iPod|BlackBerry)') {
      root /usr/share/nginx/html/mobile;
    }
index index.html;
}
}

使用 $http_user_agent 全局变量来判断用户请求数据中的的user-agent，指向不同的root路径，返回对应站点。

参考

《你不知道的Nginx（万字详解）》

方法三，在服务器端使用编程来判断

例如，如果你使用PHP作为服务器端开发语言，那么可以Jenssegers/Agent包来判断客户端设备的类型。