虽然进度条是假的，但提升用户体验是真的！！
毕竟如果网页长时间白屏，用户可能会咔嚓一下就关了浏览器，但如果有个进度条在跑，至少说明网页有小动作在进行中…
有研究表明，网页白屏超过 3 秒就可能导致用户流失。
NProgress 超级简单，核心方法就三四个，但人家实用性高啊，周下载量百万以上，足以说明一切了。
NProgress
根据作者说法，其灵感来源于 Google, YouTube, Medium 这些超级大佬，最开始的应用场景是给 Ajax 请求添加进度条，比如 jQuery 时代的 pjax。
pjax 原理：利用 Ajax 发起异步请求获取新页面 HTML，并替换当前内容，再使用 pushState 改变 URL，其原理跟当前的单页应用路由差不多，可以算最古老的前端路由应用场景了。
有兴趣的可以看下：https://github.com/defunkt/jquery-pjax
NProgress 能用在 Ajax 请求，那也能用于单页应用的路由切换，尤其是 Vite 这种现代打包工具，编译出来的 JS 文件都使用 ES6 的模块化语法，在每次路由切换时才会去加载所需的 JS 文件，这一步如果网络不好，页面给人的感觉就是卡住了，难受！
项目仓库：https://github.com/rstacruz/nprogress
npm 包：https://www.npmjs.com/package/nprogress
英文文档：https://github.com/rstacruz/nprogress
star 数量： 26.4k (26380)
开源协议： MIT
npm 周下载量： 160 万左右
最新版本： 0.2.0
兼容浏览器： Edge/Chrome/Firefox/Safari
文件大小： 约 4.1 kB (Gzip 1.7 kB)
更新状态： 五年前
使用示例
1、npm 安装
1npm install --save nprogress
说实话，这小东西这么点儿大，真没必要用 npm 安装，直接用 script 引入即可。
将文件下载保存到 Vue 项目下的 public/lib/nprogress/ 目录下，然后在 index.html 中引入：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17<head> <!-- ....其他 head 内容 --> <link rel="stylesheet" href="/lib/nprogress/nprogress.min.css" /> <script src="/lib/nprogress/nprogress.min.js"></script> <script> try {
// 配置项 window.NProgress.configure({
// 不要显示小圈圈 showSpinner: false,
// 递增频率 100 毫秒 trickleSpeed: 100 })
} catch (e) {}
</script> <!-- ....其他 head 内容 --></head>
放在 public 目录下有个好处，不用每次打包编译，文件内容也不会发生改变，还可以命中 nginx 的文件缓存，提升访问速度。
2、使用
在创建路由的地方，使用路由钩子触发进度条的显示与隐藏，比如 router.ts 中：
1
2
3
4
5
6
7
8
9
10
11
12
13router.beforeEach(async (to, from) => {
try {
;(window as any)?.NProgress?.start()
} catch (error) {
}
})
router.afterEach(() => {
try {
;(window as any)?.NProgress?.done()
} catch (error) {
}
})
为什么要用 try...catch ？毕竟是三方方法，如果报错，也别影响正常的项目运行撒！
3、效果
如果不加进度条，网速慢的情况下会是这样：
初次文件没缓存情况下，点了路由链接之后，卡了大约 2秒左右，看起来没任何响应。再看加上进度条的效果：
注意顶部那个一闪而过的蓝色线条，就是 NProgress 的进度条样式。有没有体验好一点？
注意：小东西要改变颜色只能去修改 nprogress.min.css 文件，没有配置项，毕竟人家的 CSS 和 JS 是分离开来的，默认色值 #29d 直接搜索替换就行。
4、完整的配置声明
最后
眼光放开来，NProgress 可不仅仅用于路由切换，与后端的接口交互也能用上，不过个人觉得增删改查的交互接口请求还是用局部的 菊花图 体验更好。
浙公网安备 33010602011771号