vue优化
2019-05-23 本文已影响0人
ouxuwen
移动端点击事件300ms延迟
建议使用 fastclisk 插件，在 webpack 入口文件 main.js 中如下配置：
const FastClick = require('fastclick');
document.addEventListener('DOMContentLoaded', function () {
FastClick.attach(document.body);
}, false);
异步加载组件
打包构建应用时，Javascript 包会变得非常大，影响页面加载。为了提高效率，可以把不同路由对应的组件分割成不同的代码块，当路由被访问的时候才加载对应组件。
可以通过 Vue 的 异步组件 和 Webpack 的 code splitting feature 实现：
import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
const router = new VueRouter({
routes: [
{
path: '/XXX1',
component: resolve => require(['./routers/XXX1.vue'], resolve) /* <== 主要代码是这 */
},
{
path: '/XXX2',
component: resolve => require(['./routers/XXX2.vue'], resolve) /* <== 主要代码是这 */
}
]
});
import App from './app.vue';
const app = new Vue({
router,
render: v => v(App)
}).$mount('#app');
页面切换加载中提示
当用户网络较慢时，异步加载组件需要一定时间，此时显示加载中动画相对比较友好。 可以通过 vue-router 和 vuex 轻松实现：
首先通过 vuex 定义一个状态（isLoading）：
import Vue from 'vue';
import Vuex from 'vuex';
const store = new Vuex.Store({
state: {
isLoading: false
},
mutations: {
updateLoadingStatus(state, isLoading) {
state.isLoading = isLoading;
}
}
});
const app = new Vue({
store,
router,
render: v => v(App)
}).$mount('#app');
其次通过 vue-router 的 beforeEach 和 afterEach 更改 isLoading 状态：
router.beforeEach((route, redirect, next) => {
/* 显示加载中动画 */
store.commit('updateLoadingStatus', true);
next();
});
router.afterEach(route => {
/* 隐藏加载中动画 */
store.commit('updateLoadingStatus', false);
});
最后在 App.vue 里通过 isLoading 显示/隐藏加载中动画即可：
<template>
<div style="height: 100%;"><!-- 特别注意：若页面结构使用 yd-layout 组件时，这里需加上 height: 100%; -->
<div v-show="isLoading">加载中</div>
<router-view v-show="!isLoading"></router-view>
</div>
</template>
<script type="text/babel">
export default {
computed: {
isLoading() {
return this.$store.state.isLoading
}
}
}
</script>
