Vue项目优化

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请求速度