缓存

webpack 中的 hash、chunkhash、contenthash 区别

hash 一般是结合 CDN 缓存来使用，通过 webpack 构建之后，生成对应文件名自动带上对应的 MD5 值。如果文件内容改变的话，那么对应文件哈希值也会改变，对应的 HTML 引用的 URL 地址也会改变，触发 CDN 服务器从源服务器上拉取对应数据，进而更新本地缓存。但是在实际使用的时候，这几种 hash 计算还是有一定区别。

1. hash 　　 hash 是跟整个项目的构建相关，只要项目里有文件更改，整个项目构建的 hash 值都会更改，并且全部文件都共用相同的 hash 值

2. chunkhash

采用 hash 计算的话，每一次构建后生成的哈希值都不一样，即使文件内容压根没有改变。这样子是没办法实现缓存效果，我们需要换另一种哈希值计算方式，即 chunkhash。 　　 chunkhash 和 hash 不一样，它根据不同的入口文件(Entry)进行依赖文件解析、构建对应的 chunk，生成对应的哈希值。我们在生产环境里把一些公共库和程序入口文件区分开，单独打包构建，接着我们采用 chunkhash 的方式生成哈希值，那么只要我们不改动公共库的代码，就可以保证其哈希值不会受影响。

3. contenthash

在使用 chunkhash 的例子中，如果 index.css 被 index.js 引用了，那么就会共用相同的 chunkhash 值。但是这样子有个问题，如果 index.js 更改了代码，css 文件就算内容没有任何改变，由于是该模块发生了改变，导致 css 文件会重复构建。

这个时候，我们可以使用 extra-text-webpack-plugin 里的 contenthash 值，保证即使 css 文件所处的模块里就算其他文件内容改变，只要 css 文件内容不变，那么不会重复构建。

sourcemap

Source map 就是一个信息文件，里面储存着位置信息。也就是说，转换后的代码的每一个位置，所对应的转换前的位置。

源文件

function sayHello(name) {
  if (name.length > 2) {
    name = name.substr(0, 1) + "...";
  }
  console.log("hello,", name);
}

压缩后

function sayHello(name) {
  if (name.length > 2) {
    name = name.substr(0, 1) + "...";
  }
  console.log("hello,", name);
}
sayHello("世界");
sayHello("第三世界的人们");

map 文件

{"version":3,"sources":["log.js","main.js"],"names":["sayHello","name","length","substr","console","log"],"mappings":"AAAA,SAASA,SAASC,MACd,GAAIA,KAAKC,OAAS,EAAG,CACjBD,KAAOA,KAAKE,OAAO,EAAG,GAAK,MAE/BC,QAAQC,IAAI,SAAUJ,MCJ1BD,SAAS,MACTA,SAAS"}

二进制

通过 accept 限制上传文件类型

在日常工作中，文件上传是一个很常见的功能。在某些情况下，我们希望能限制文件上传的类型，比如限制只能上传 PNG 格式的图片。针对这个问题，我们会想到通过 input 元素的 accept 属性来限制上传的文件类型：

<input type="file" id="inputFile" accept="image/png" />

这种方案虽然可以满足大多数场景，但如果用户把 JPEG 格式的图片后缀名更改为 .png 的话，就可以成功突破这个限制。因为通过 文件后缀名或文件的 MIME 类型 并不能识别出正确的文件类型。我们可以通过读取文件的二进制数据来识别正确的文件类型。

如何通过二进制查看图片的类型

计算机并不是通过图片的后缀名来区分不同的图片类型，而是通过 Magic Number 来区分。 对于某一些类型的文件，起始的几个字节内容都是固定的，根据这几个字节的内容就可以判断文件的类型。

常见图片类型对应的 Magic Number 如下表所示：

优雅代码

If 语句

bad

if (value === "duck" || value === "dog" || value === "cat") {
  // ...
}

good

const options = ["duck", "dog", "cat"];
if (options.includes(value)) {
  // ...
}

提前退出机制

function handleEvent(event) {
  if (event) {
    const target = event.target;
    if (target) {
      // ...
    }
  }
}

使用提前退出，减少嵌套

function handleEvent(event) {
  if (!event || !event.target) {
    return;
  }
  // ...
}

前端错误的分类

• 资源加载错误
• 代码运行错误

错误的捕获方式

即时运行错误的捕获方式

• try - catch
• window.onerror

资源加载错误

• object.onerror
  • image 标签、script 标签上都可以加 onerror 事件
  • 资源加载错误不会冒泡，但会捕获
• performance.getEntries()
  • 获取所有已经加载资源的获取时长
• window 对象上通过事件捕获 Error 事件

注： addEventLitener('事件类型', function(e){ /回调函数/ },捕获 true 或冒泡 false )

一般情况下错误监控都是在捕获的阶段进行。

跨域的 JS 运行错误

因为了，只知道错误，但是无法定位错误信息 解决方法：

1. 客户端，在 script 标签上增加 crossorigin 属性
2. 服务端，设置 JS 资源响应头 Access-Control-Allow-Origin: *

上报错误信息

1. 采用 Ajax 通信上报
2. 利用 image 对象的 src 属性上报