性能优化:keep-alive和路由懒加载

目录

keep-alive

路由懒加载

作用

实现

1.ES6标准语法import（）---------推荐使用！！！！！

2.Vue异步组件

3.webpack的require，ensure()

原理

---

keep-alive

        组件进行切换，我们有时只是想看看其他页面，但点回来仍然希望保持原有的组件状态，也就是不重新渲染数据，这时候就需要用到keep-alive（抽象组件）实现组件加载过后切换时无需重新加载（进行了缓存），常常搭配transion实现不同切换效果

        官网要求：transition 和 keep-alive 现在必须通过 v-slot API 在 RouterView 内部使用：

<router-view v-slot="{ Component }">
  <transition>
    <keep-alive>
      <component :is="Component" />
    </keep-alive>
  </transition>
</router-view>

在具体的组件当中，需要配置onActivated和unDeactivated声明周期函数,完成相关逻辑实现

//例如在滑动图中
onActivated(() => {
    slider.value.enable()   // slider：对应的dom元素
    slider.value.refresh()
  })

  onDeactivated(() => {
    slider.value.disable()
  })

路由懒加载

作用

        vue是SPA（单页面），所以首页在第一次加载的时候就会把所有组件的相关资源都加载了，即使实际上有些其他未出现在当前视图的组件的资源暂时会用不上，这样会导致网页首页加载速度过慢，用户体验不好

        所以我们可以在打包的时候不再将所有的js包打包到一起，而是将不同路由对应的组件进行分别打包成单独的js块，当路由被访问的时候再加载对应的组件

        路由懒加载就是实现首次出现再加载的功能，也称路由按需加载

        实际上就是结合 Vue 的异步组件异步组件和 Webpack 的代码分隔功能

实现

非懒加载

import UserDetails from './views/UserDetails'

const router = createRouter({
  routes: [{ path: '/users/:id', component: UserDetails }],
})

懒加载

1.ES6标准语法import（）---------推荐使用！！！！！

const UserDetails = () => import(/* webpackChunkName: "group-user" */ './UserDetails.vue')
​
const router = createRouter({
  routes: [{ path: '/users/:id', component: UserDetails }],
})

webpackChunkName是可以指定组件打包到的异步块chunk当中，这个块为group-user这个块当中

2.Vue异步组件

const router = new Router({
  routes: [
   {
     path: '/list',
     component: (resolve) => {require(['@/components/list'], resolve)
     }
    }]})

3.webpack的require，ensure()

const List = resolve => require.ensure([], () => resolve(require('@/components/list')),'list');
// 路由也是正常的写法  这种是官方推荐的写的 按模块划分懒加载 
const router = new Router({
  routes: [
  {
    path: '/list',
    component: List,
    name: 'list'
  }
 ]
}))

原理

1.将异步组件定义为返回一个 Promise 的工厂函数 (该函数返回的 Promise 应该 resolve 组件本身)：

const Foo = () => Promise.resolve({ /* 组件定义对象 */ })

2.在 Webpack 2 中，我们可以使用动态import语法来定义代码分块点 (split point)：

import(/* webpackChunkName: "group-foo" */ './Foo.vue') // 返回 Promise

按照原本webpack打包规则，由于进行了资源整合，会将一些js，css等文件进行一定的合并，从而达到减少资源请求的目的。但这样我们无法分离单个组件中用到的资源也就无法实现懒加载。

import()工厂函数可以将这个模块和其引用的子模块，分离到单独的chunk当中，可进行命名，并返回一个promise对象

3.结合这两者，这就是如何定义一个能够被 Webpack 自动代码分割的异步组件。

const Foo = () => import('./Foo.vue')