1.路由懒加载
当进行打包构建应用时,打包后的代码逻辑实现包可能会非常大。当用户要去使用的时候,会把所有的资源都请求下来才可以。所以需要把不同路由对应的组件分割成不同的代码块,当路由被访问的时候才加载对应的组件,这样比较高效。
懒加载结合了vue的异步组件技术和webpack的代码分割功能,将路由对应的组件加载成一个个对应的js包 ,在路由被访问时才将对应的组件加载。
异步组件实现懒加载
const routes = [
{// 404路由
path: '/404',
name: '404',
component: resolve=>(require(["/@/views/404.vue"],resolve))
},
];
ESimport方法
const routes = [
{// 404路由
path: '/404',
name: '404',
component: ()=>import('/@/views/404.vue')
},
];
2.图片懒加载
懒加载的好处在于减少服务器的压力,在网络比较慢的情况下,可以提前给这张图片添加一个占位图片,提高用户的体验
安装vue-lazyload
npm i vue-lazyload -S
main.js中引入
import VueLazyload from "vue-lazyload";
Vue.use(VueLazyload,{
preLoad: 1.3,
loading: require('../src/assets/loading.gif'),
attempt: 1
})
3. 组件优化
大部分业务或管理系统中,模块较多、单模块功能较多的情况时有发生,若是组件没有划分好,会导致页面加载缓慢,影响用户体验,针对此情况,可将模块内按照布局或功能重新划分vue组件:
1.按模块划分路由。按照业务模块划分路由及子路由,保证模块间的隔离
2.模块内按布局或功能划分组件。单个模块功能较多或逻辑较复杂时,按照布局划分为左右或上下及其组合模式划分组件,以子组件的方式放在模块中,方便打包优化、复用、功能拓展及维护
3.能复用的组件尽量复用。布局、功能模块等均可复用,如详情页的弹窗、表单等。
4.代码优化
1.第三方模块按需引入,去除不必要的引入
2.v-if,v-show的选择。频繁切换使用v-show、不频繁切换使用v-if
5.http请求优化
1.合理规划css,js,图片等,将可以合并的代码合并;合理规划api,将可合并的接口请求合并
2.使用keep-alive保持组件的数据缓存,浏览器请求时,有缓存的话,会直接读取缓存并呈现,减少请求次数,节省带宽
3.项目上线后,可以使用第三方CDN(Content Delivery Network,即内容分发网络)服务进行加速,使用CDN加速后,加快DNS域名解析速度,即加快http请求速度