使用webpack内置的stats

• stats: 构建的统计信息

package.json 中使用 stats

1
2
3

"scripts": {
  "build:stats": "webpack --config webpack.prod.js --json > stats.json"
},

DNS(Domain Name System)，翻译为域名解析系统，是互联网的一项服务。它作为将域名和IP地址相互映射的一个分布式数据库，能够使人更方便地访问互联网。

围绕DNS可做的性能优化非常的多，比如大家所熟知的全局负载均衡(GSLB)，用户可以访问到离自己最近服务器，从而获得最优的访问体验，这项优化更多需要服务端去完成。前端主要关注 DNS Prefetch。

Performance可以给我们提供非常多的信息，但Performance不够直观，需要开发者透过表面的这些参数去分析背后的性能问题。有了这个诉求之后，另一个性能优化工具就出现了，它就是LightHouse。

简介

LightHouse 是 Google 开源的一个自动化工具，用于改进网络应用的质量。你可以将其作为一个 Chrome 扩展程序运行，或从命令行运行。 当为 Lighthouse 提供一个要审查的网址，它将针对此页面运行一连串的测试，然后生成一个有关页面性能的报告。可以参考失败的测试，看看可以采取哪些措施来改进应用。

准备工作

1.首先我们需要打开新的无痕窗口，进入隐身模式，可以保证Chrome在一个相对干净的环境下运行。这里是为了避免相关的浏览器插件带来的干扰，这些插件可能会影响我们分析性能表现。使用快捷键 ctrl + shift + N 即可打开chrome新的无痕窗口

2.按F12进入开发者工具，打开performance面板。

Performance API

这个 API 是 HTML5 新增的特性。过去我们要统计脚本的运行时间，会使用 Date.getTime() 去获取对应的时间；如果要获取白屏时间是在 head 末尾插入一段获取时间戳的代码，然后用这个时间戳减去开始接收数据的那个时间戳，得出的结果为白屏时间。这样的方法无疑是笨重的，而且获取的时间无法更精确(只能到ms级别)，而且一些后台比较关注的时间根本无法获取。W3C 为了解决这个问题，在 HTML5 推出的时候，新增了这个 API 。