vue 优化技巧路由及组件懒加载

- 日理万妓 2023-02-24 08:06 1阅读 0赞

懒加载定义:懒加载简单来说就是延迟加载或按需加载，即在需要的时候的时候进行加载。

解决方案:常用的懒加载方式有两种,即使用**vue异步组件** 和 **ES中的import**

**未使用懒加载vue 路由代码**

import Vue from 'vue'
    import Router from 'vue-router'
    import HelloWorld from '@/components/HelloWorld'
    
    Vue.use(Router)
    
    export default new Router({
       routes: [{
            path: '/',
            name: 'HelloWorld',
            component:HelloWorld
        }]
    })

使用异步组件实现懒加载

import Vue from 'vue'
    import Router from 'vue-router'
    import HelloWorld from '@/components/HelloWorld'
    Vue.use(Router)
    
    export default new Router({
      routes: [
        {
          path: '/',
          name: 'HelloWorld',
          component: resolve=>(require(["@/components/HelloWorld"],resolve))
        }
      ]
    })

ES 提出的import方法，（**------相对****常用------）**

import Vue from 'vue'
    import Router from 'vue-router'
    
    Vue.use(Router)
    
    const HelloWorld = ()=>import("@/components/HelloWorld")
    export default new Router({
      routes: [
        {
          path: '/',
          name: 'HelloWorld',
          component:HelloWorld
        }
      ]
    })

**组件懒加载**

原来组件中写法

<template>
      <div class="hello">
      <One-com></One-com>
      1111
      </div>
    </template>
    
    <script>
    import One from './one'
    export default {
      components:{
        "One-com":One
      },
      data () {
        return {
          msg: 'Welcome to Your Vue.js App'
        }
      }
    }
    </script>

const方法

<template>
      <div class="hello">
      <One-com></One-com>
      1111
      </div>
    </template>
    
    <script>
    const One = ()=>import("./one");
    export default {
      components:{
        "One-com":One
      },
      data () {
        return {
          msg: 'Welcome to Your Vue.js App'
        }
      }
    }
    </script>

异步方法

<template>
      <div class="hello">
      <One-com></One-com>
      1111
      </div>
    </template>
    
    <script>
    export default {
      components:{
        "One-com":resolve=>(['./one'],resolve)
      },
      data () {
        return {
          msg: 'Welcome to Your Vue.js App'
        }
      }
    }
    </script>

**总结一下**

路由和组件的常用两种懒加载方式：

1、vue异步组件实现路由懒加载

component：resolve=>(\['需要加载的路由的地址'，resolve\])

2、es提出的import(推荐使用这种方式)

const HelloWorld = （）=>import('需要加载的模块地址')