vue实战 - 项目优化/扩展

1. 缓存路由组件对象

<!-- 好处: 复用路由组件对象, 复用内存中路由组件获取的后台数据 -->
<keep-alive>
	<router-view />
</keep-alive>
复制代码

2. 路由组件懒加载

咱们写的全部Js文件最后都会打包成一个文件，而咱们实际的需求是路由组件并非一次所有加载过来，而是按需加载。因此就要在打包前就对代码进行分割，从而实现路由组件懒加载。

// router/index.js文件中 改变引入方式 实现路由组件懒加载
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')

// 此时的Msite等都是返回路由组件的函数，只有请求对应的路由路径时(第一次)才会执行此函数并加载路由组件
复制代码

此时切换路由，能够在控制台NetWork里看到拆分打包后的js文件实现了按需加载

3. 图片懒加载: vue-lazyload

安装npm install --save vue-loader

// 在main.js文件中引入并注册插件
import VueLazyload from 'vue-lazyload'
// 将一张loading图片加载进来
import loading from './common/img/loading.gif'
Vue.use(VueLazyload, { // 内部自定义一个指令lazy
	loading
})
// 在图片标签中使用 （Food组件）
<img v-lazy="food.image">
复制代码

4. 打包文件分析与优化

• vue 脚手架提供了一个用于可视化分析打包文件的包 webpack-bundle-analyzer 和配置
• 启用打包可视化: npm run build --report 能够根据可视化文件分析页面对项目进行优化