1.路由懒加载
使用vue-router的方法
{
path: '/cartEdit',
name: 'cartEdit',
component: () => import('@/views/Cart/edit') // 通过这种方法，只有使用这个组件时才会被加载，防止开始就加载大量的组建
},
2.图片懒加载
//使用vue-lazyload插件
// 1.安装插件
npm install vue-lazyload --save-dev
// 2.main.js引入插件：
import VueLazyLoad from 'vue-lazyload'
Vue.use(VueLazyLoad,{
error:'./static/error.png',
loading:'./static/loading.png'
})
// 3. vue文件中将需要懒加载的图片绑定 v-bind:src 修改为 v-lazy
<img class="item-pic" v-lazy="newItem.picUrl"/>
- 组件缓存
使用vue的<keep-alive>，详情可见vue的<keep-alive>
//结合router，缓存部分页面
//使用$route.meta的keepAlive属性：
//需要在router中设置router的元信息meta
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>
4.路由模式选择
vue路由模式分为两种，一种是hash模式，另一种history 模式
1.hash —— 即地址栏 URL 中的 # 符号（此 hash 不是密码学里的散列运算）。
比如这个 URL：http://www.abc.com/#/hello，hash 的值为 #/hello。它的特点在于：hash 虽然出现在 URL 中，但不会被包括在 HTTP 请求中，对后端完全没有影响，因此改变 hash 不会重新加载页面。
2.history —— 利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。（需要特定浏览器支持）
这两个方法应用于浏览器的历史记录栈，在当前已有的 back、forward、go 的基础之上，它们提供了对历史记录进行修改的功能。只是当它们执行修改时，虽然改变了当前的 URL，但浏览器不会立即向后端发送请求。
当服务器没做配置的时候最好使用hash模式，避免用户刷新造成404错误
- 封装组件
对于组件的封装我就不详解了，这个可以去vue官网中学习，我们要做的就是将项目中重复量比较大的对它进行组件封装，可以让我们的代码更加简洁明了
6.减少没必要代码，并补充缺少的注释
审查自己的代码，对一些没用到的变量方法进行删除，然后对你的方法变量做一些有必要的注释，防止过度那时间就遗忘了
- 优化算法流程
这个环节可能就需要动大手术了，因为你需要重写你自己的方法，代表这你写的无效了，对于一些耗时比较长的算法进行替换，或者整改，然后将一些阻塞主线程的请求或者方法进行适当的完善
网友评论