标签：Loading vue CDN 项目 拦截器 prefetch 优化 加载

粒子特效：

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 来排除这个模块

标签：Loading,vue,CDN,项目,拦截器,prefetch,优化,加载
来源： https://www.cnblogs.com/hubaba13/p/15501286.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。