vue项目优化【缓存路由组件对象、路由组件懒加载、图片懒加载、打包文件分析与优化】

 

1. 缓存路由组件对象

<keep-alive>
<router-view />
</keep-alive>

好处: 复用路由组件对象, 复用路由组件获取的后台数据

 

2. 路由组件懒加载

src/router/index.js 

// import MSite from '../pages/MSite/MSite.vue'
// import Search from '../pages/Search/Search.vue'
// import Order from '../pages/Order/Order.vue'
// import Profile from '../pages/Profile/Profile.vue'
const MSite = () => import('../pages/MSite/MSite.vue')
const Search = () => import('../pages/Search/Search.vue')
const Order = () => import('../pages/Order/Order.vue')
const Profile = () => import('../pages/Profile/Profile.vue')

 

3. 图片懒加载: vue-lazyload

1) Github:

https://github.com/hilongjw/vue-lazyload

2) 下载包

npm install --save vue-loader

3) 使用

main.js

import VueLazyload from 'vue-lazyload'
import loading from './common/img/loading.gif'
Vue.use(VueLazyload, {
loading
})

use.vue

<img v-lazy="food.image">

4. 打包文件分析与优化

1) vue 脚手架提供了一个用于可视化分析打包文件的包 webpack-bundle-analyzer 和配置

2) 启用打包可视化: npm run build --report

3) 优化: 使用 date-fns 代替 moment

// import moment from 'moment'
// import {format} from 'date-fns'
import format from 'date-fns/format'
import Vue from 'vue'
Vue.filter('dateString', function (value, formatStr) {
// return moment(value).format(format || 'YYYY-MM-DD HH:mm:ss')
return format(value, formatStr || 'YYYY-MM-DD HH:mm:ss')
})