zoukankan      html  css  js  c++  java
  • vue-router实现路由懒加载

    当打包构建应用时,Javascript 包会变得非常大,影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了。结合 Vue 的异步组件和 Webpack 的代码分割功能,轻松实现路由组件的懒加载.

    1、定义

      也叫延迟加载,即在需要的时候进行加载,随用随载

    2、为什么需要

      像vue这种单页面应用,如果没有应用懒加载,运用webpack打包后的文件将会异常的大,造成进入首页时,需要加载的内容过多,时间过长,会出啊先长时间的白屏,即使做了loading也是不利于用户体验,而运用懒加载则可以将页面进行划分,需要的时候加载页面,可以有效的分担首页所承担的加载压力,减少首页加载用时,进入首页不用一次加载过多资源造成用时过长。

    3、如何实现?

    (1)第一种写法:使用 AMD 风格的 require,于是就更简单了:

    例:const Foo = resolve => require(['./Foo.vue'], resolve)
    const routers = [
        {
            path: '/',
            name: 'index',
            component: (resolve) => require(['./views/index.vue'], resolve)
        }
    ]

    (2)第二种写法:(使用import)

    例:component: () => import('@/components/Two')
    const Index = () => import(/* webpackChunkName: "group-home" */  '@/views/index')
    const routers = [
        {
            path: '/',
            name: 'index',
            component: Index
        }
    ]

    (3)第三种写法:使用webpack特有的require.ensure()。注:require.ensure 是 Webpack 的特殊语法,用来设置 code-split point

    例:components: r => require.ensure([], () => r(require('@/components/Three')), 'group-home')
    const Index = r => require.ensure([], () => r(require('./views/index')), 'group-home');
    const routers = [
        {
            path: '/',
            name: 'index',
            component: Index
        }
    ]

    4、把组件按组分块

    有时候我们想把某个路由下的所有组件都打包在同个异步块 (chunk) 中。只需要使用 命名 chunk,一个特殊的注释语法来提供 chunk name (需要 Webpack > 2.4)。

    const Foo = r => require.ensure([], () => r(require('./Foo.vue')), 'group-foo')
    const Bar = r => require.ensure([], () => r(require('./Bar.vue')), 'group-foo')
    const Baz = r => require.ensure([], () => r(require('./Baz.vue')), 'group-foo')
    const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')
    const Bar = () => import(/* webpackChunkName: "group-foo" */ './Bar.vue')
    const Baz = () => import(/* webpackChunkName: "group-foo" */ './Baz.vue')

    Webpack 会将任何一个异步模块与相同的块名称组合到相同的异步块中。

    5、注

    • 一般常用第二种简写

    • 第三种中,’group-home’是把组件按组分块打包, 可以将多个组件放入这个组中,在打包的时候Webpack会将相同 chunk 下的所有异步模块打包到一个异步块里面。

  • 相关阅读:
    设计模式系列
    Python3 系列之 可变参数和关键字参数
    设计模式系列
    【HANA系列】SAP HANA ODBC error due to mismatch of version
    【FICO系列】SAP FICO FS00修改科目为未清项目管理
    【FIORI系列】SAP OpenUI5 (SAPUI5) js框架简单介绍
    【HANA系列】SAP HANA SQL获取当前日期加若干天后的日期
    【HANA系列】SAP HANA SQL获取本周的周一
    【HANA系列】SAP HANA SQL获取当前日期
    【HANA系列】SAP HANA SQL获取当前日期最后一天
  • 原文地址:https://www.cnblogs.com/art-poet/p/12509327.html
Copyright © 2011-2022 走看看