vue 页面多模块,优化加载速度

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue 页面多模块,优化加载速度相关的知识,希望对你有一定的参考价值。

参考技术A        import Vue from'vue';

       import Router from'vue-router' ;

       import HelloWorld    from'@/components/HelloWorld' ;

       Vue.use(Router);

       export defaultnew Router(

         routes: [

         

              path: '/',

              name: 'HelloWorld',

              component:HelloWorld

           

         ]

       )

import Vue from 'vue'

import Router from 'vue-router'/* 此处省去之前导入的HelloWorld模块 */

Vue.use(Router)

export defaultnew Router(

  routes: [

   

      path: '/',

      name: 'HelloWorld',

      component: resolve=>(require(["@/components/HelloWorld"],resolve))

   

  ]

)

import Vue from 'vue'

import Router from 'vue-router'

Vue.use(Router)

const HelloWorld = ()=>import("@/components/HelloWorld")

export defaultnew Router(

  routes: [

   

      path: '/',

      name: 'HelloWorld',

      component:HelloWorld

   

 ]

)

原始写法:

<One-com></One-com> 1111

<One-com></One-com> 1111

<One-com></One-com> 1111

<One-com></One-com> 1111

<One-com></One-com> 1111

<One-com></One-com> 1111

<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>

<One-com></One-com> 1111

总结:

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

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

      component: resolve=>(['地址'], resolve)

    2.es提出的import(推荐使用)

      const HelloWorld = () => import('地址')

vue路由多个子路由页面加载多次

参考技术A 响应路由参数的变化,有三个菜单只有参数不同,但使用的同一个组件页面,配置路由时指向了不同三个路由。但切换菜单时,页面不刷新,导致路由多个子路由页面加载多次。

以上是关于vue 页面多模块,优化加载速度的主要内容,如果未能解决你的问题,请参考以下文章

进一步优化SPA的首屏打开速度(模块化与懒加载) by 嗡

ionic 懒加载页面模块合并

webpack五个核心模块

vue路由多个子路由页面加载多次

webpack优化配置

webpack优化配置