Vue项目优化

• 使用keep-alive缓存路由组件对象

常用于详情页返回列表页，保存组件的渲染状态，避免被重复渲染和创建。

  <div id="app">
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive"></router-view>
  </div>


  // router.js
  {
    path: '/topicContent',
    component: TopicContent,
    meta: { keepAlive: true }
  },

• 路由懒加载（动态加载路由）

通过import/require语法，将component属性设置为一个函数以及webpack提供的require.ensure()。

// 不使用懒加载
// import MSite from '../pages/MSite/MSite.vue'
// import Search from '../pages/Search/Search.vue'

// 没有指定webpackChunkName，每个组件打包成一个js文件
const MSite = () => import('../pages/MSite/MSite.vue')
const Search = () => import('../pages/Search/Search.vue')

// 指定了相同的webpackChunkName，会合并打包成一个js文件
const MSite = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '@/components/MSite/MSite.vue')

// 使用 require.ensure
const List = r => require.ensure([], () => r(require('../components/list/list')), 'List')



const routes = [
  {
    path: '/',
    component: MSite
  },
  {
    path: '/search',
    component: Search
  },
  {
    path: '/list',
    component: List 
  }]

• 图片懒加载

安装依赖，npm install --save vue-lazyload

// main.js
import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload, {
  preLoad: 1.3,
  error: require('./images/empty.png'),
  loading: require('./images/empty.png'),
  attempt: 1
})

<!-- 使用v-lazy代替v-bind:src -->
<img v-lazy="item.indexpic">
<!-- 有过滤器的情况 -->
<img v-lazy="$options.filters.cutPic(item.indexpic,750,410)" class="img100">

•  Date-fns 代替moment，体积更小