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.减少没必要代码,并补充缺少的注释
审查自己的代码,对一些没用到的变量方法进行删除,然后对你的方法变量做一些有必要的注释,防止过度那时间就遗忘了
- 优化算法流程
这个环节可能就需要动大手术了,因为你需要重写你自己的方法,代表这你写的无效了,对于一些耗时比较长的算法进行替换,或者整改,然后将一些阻塞主线程的请求或者方法进行适当的完善