zoukankan      html  css  js  c++  java
  • Vue-组件懒加载

    在单页应用的世界,随着项目的复杂化,webpack打包后的文件越来越大,进入页面时,加载内容过多导致加载时间变长,不利于用户体验。

    那什么是懒加载?

    懒加载也叫延迟加载,即需要的时候进行加载。

    1) 先来看看平时路由是如何配置

    import Vue from 'vue'
    import Router from 'vue-router'
    import Home from '@/pages/home/homePage'
    import Detail from '@/pages/detail/detailPage'
    import Content from '@/pages/content/contentPage'
    import Index from '@/pages/index'
    
    Vue.use(Router)
    
    export default new Router({
      mode: 'history',
      routes: [
        {
          path: '/from',
          name: 'index',
          component: Index,
          children: [
            {
              path: 'page1',
              name: 'tab1',
              component: Home
            },
            {
              path: 'page2',
              name: 'tab2',
              component: Detail
            },
            {
              path: 'page3',
              name: 'tab3',
              component: Content
            }
          ]
        }
      ]
    })

    打包结果截图:

    页面请求截图(所有内容都打包到app.js里面):

    2) 再来看看路由页面如何配置懒加载

    • 利用使用import()配合webpack动态导入模块
    • webpackChunkName:  webpack 2.6.0以后,支持使用注释的方式给动态导入的模块添加chunk name
    import Vue from 'vue'
    import Router from 'vue-router'
    
    Vue.use(Router)
    
    export default new Router({
      mode: 'history',
      routes: [
        {
          path: '/from',
          name: 'index',
          component: () => import(/* webpackChunkName: 'index' */ '../pages/index'),
          children: [
            {
              path: 'page1',
              name: 'tab1',
              component: () => import(/* webpackChunkName: 'index/tab1' */ '../pages/home/HomePage')
            },
            {
              path: 'page2',
              name: 'tab2',
              component: () => import(/* webpackChunkName: 'index/tab2' */ '../pages/detail/detailPage')
            },
            {
              path: 'page3',
              name: 'tab3',
              component: () => import(/* webpackChunkName: 'index/tab3' */ '../pages/content/contentPage')
            }
          ]
        }
      ]
    })

    打包结果截图:

    页面请求截图(根据上面的配置可知实际还有chunk2, chunk3还未加载,需要切换到对应的页面才会按需加载出来):

    3) 除了在路由页面配置懒加载,路由页面中的组件也可实现懒加载

    export default {
      name: 'index',
      components: {
        headerTab: () => import('@/components/header')
      }
    }

    页面请求截图:

    4) 最后平时的项目中该如何选

    • 当路由页面和路由页面找中的组件全使用懒加载时: 项目最大化的实现了按需加载,但一个页面嵌入多个组件时与此同时将带来过多的http请求,可能造成网页显示过慢且渲染参差不齐的问题。
    • 路由页面懒加载,路由页面中的使用较为频繁的组件使用懒加载: 合理满足按需加载的情况下,又相应减少了http请求。但在团队开发合作中,需要将按需加载的组件和非按需加载的组件做好划分,达到更好的维护。

    参考资料:

    1) https://www.cnblogs.com/zhanyishu/p/6587571.html (vue2组件懒加载浅析)

  • 相关阅读:
    SCU3033 Destroying a Painting(最小费用最大流)
    HDU4859 海岸线(最小割)
    ZOJ3228 Searching the String(AC自动机)
    HUST1024 dance party(最大流)
    SGU438 The Glorious Karlutka River =)(最大流)
    SPOJ839 Optimal Marks(最小割)
    BZOJ1086 [SCOI2005]王室联邦(树分块)
    SCU3109 Space flight(最大权闭合子图)
    HDU3138 Coconuts(最小割)
    ZOJ2539 Energy Minimization(最小割)
  • 原文地址:https://www.cnblogs.com/Tiboo/p/12536739.html
Copyright © 2011-2022 走看看