vue项目优化

粒子特效:

vue-particles

 

nprogress 

网页加载进度条

全局前置守卫   NProgress.start()

全局后置守卫 :NProgress.done()

 

页面loding

单个页面加loading、阻止重复点击 通过element-ui的 Loading 加载(用户体验度最高的)

 

axios封装

  • 封装axios导出request实例对象(timeout、baseURL、.env、headers content-type、

  • 请求拦截器(token、CancelToken、Loading

  • 响应拦截器-成功(关闭Loading、 接口权限、TOKEN过期、res.data.data过滤

  • 响应拦截器-失败(关闭Loading、timeout处理 、404、canceled、邮件报警捕捉前端异常

 

vue-lazyload     

vue图片懒加载

 vue文件中将需要懒加载的图片绑定 v-bind:src 修改为 v-lazy 

 

路由/组件懒加载

关闭预加载prefetch

chainWebpack: config => {
// 移除 prefetch 插件
config.plugins.delete('prefetch')
},

解决首屏加载过慢

 

CDN优化第三方库

通过 externals 加载外部CDN资源

映入了CDN就不要再打包这个模块了,所以通过 externals 来排除这个模块

上一篇:三数之和 java


下一篇:vivado无法打开vitis, 卡在loading org.eclipse.e4.ui.css.swt界面,软件无响应