精华内容
下载资源
问答
  • 懒加载简单来说就是延迟加载或按需加载,即在需要的时候的时候进行加载。这篇文章主要介绍了vue路由懒加载组件懒加载 ,需要的朋友可以参考下
  • Vue组件懒加载和Vue路由懒加载 这里只记录了router层面上的懒加载方法,还有在*.vue中各种懒加载的方法,例如:需要的时候import组件,用完destory等等。 Vue组件懒加载 vue-router配置路由 , 使用vue的异步组件...

    Vue组件懒加载和Vue路由懒加载

    这里只记录了router层面上的懒加载方法,还有在*.vue中各种懒加载的方法,例如:需要的时候import组件,用完destory等等。

    Vue组件的懒加载

    vue-router配置路由 , 使用vue的异步组件技术 , 可以实现按需加载 .
    但是,这种情况下一个组件生成一个js文件

    router.js

    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
        },{
          path: '/Dom/:name',
          name: 'Dom',
          component: resolve => require(["@/components/Dom"],resolve)
        },{
          path: '/DomChild/:DomChild',
          name: 'DomChild',
          component: resolve => require(["@/components/DomChild"],resolve)
        }
      ]
    })
    
    

    C:\Users\DELL\AppData\Roaming\Typora\typora-user-images

    require( [ ] ,callback ) 接受两个参数

    ​ 第一个参数是一个数组,表示所依赖的模块

    ​ 第二个参数是一个回调函数,当前面指定的模块加载成功后,它将被调用。加载的模块会以参数形式传入该函数,从而在回调函数内部就可以使用这些模块。

    Vue路由的懒加载(使用import)

    router.js

    import Vue from 'vue'
    import Router from 'vue-router'
    /*
    不指定webpackChunkName,每个组件打包成一个js文件。
    const HelloWorld = () => import('@/components/HelloWorld');
    const Dom = () => import('@/components/Dom');
    const DomChild = () => import('@/components/DomChild');
    */
    const HelloWorld = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '@/components/HelloWorld');
    const Dom = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '@/components/Dom');
    const DomChild = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '@/components/DomChild');
    
    Vue.use(Router);
    
    export default new Router({
      routes: [
        {
          path: '/',
          name: 'HelloWorld',
          component: HelloWorld
        },{
          path: '/Dom/:name',
          name: 'Dom',
          component: Dom
        },{
          path: '/DomChild/:DomChild',
          name: 'DomChild',
          component: DomChild
        }
      ]
    })
    

    使用webpack的require.ensure()

    webpack 在编译时,会静态地解析代码中的 require.ensure(),同时将模块添加到一个分开的 chunk 当中。这个新的 chunk 会被 webpack 通过 jsonp 来按需加载。

    require.ensure(dependencies: String[], callback: function(require), chunkName: String)
    

    接收三个参数

    这里有三个参数,第一个参数是个数组,标明依赖的模块

    第二个是回调函数,在这个回调函数里面的require的文件会被单独打包成一个chunk,不会和主文件打包在一起,这样就生成了两个chunk,第一次加载时只加载主文件,当点击时就会加载单独打包的chunk。

    第三个chunkName 是提供给这个特定的 require.ensure() 的 chunk 的名称。通过提供 require.ensure() 不同执行点相同的名称,我们可以保证所有的依赖都会一起放进相同的 文件束

    坑点二则
    require.ensure(['./a.js'], function(require) {
        require('./b.js');
    });
    

    上面代码, a.jsb.js 都被打包到一起,而且从主文件束中拆分出来。但只有 b.js 的内容被执行。a.js 的内容仅仅是可被使用,但并没有被输出。

    想去执行 a.js,我们需要异步地引用它,如 require('./a.js'),让它的 JavaScritp 被执行。

    require.ensure([], function(require){
        require('./a.js');
    });
    

    拆分点被创建,而且 a.js 被 webpack 分开打包。

    言归正传,现在来讨论第三种require.ensure()实现懒加载的方法

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

    ]
    })

    
    
    展开全文
  • vue组件懒加载三种方式及区别

    千次阅读 2020-05-29 19:35:33
    1、vue异步组件 2、es6中import懒加载 3、require.ensure() const Home = () => import(/*webpackChunkName:'home'*/'../components/home'); const Home1 = ()=> import(/*webpackChunkName:'home'*/'../...

    1、vue异步组件
    2、es6中import懒加载
    3、require.ensure()

    
    const Home = () => import(/*webpackChunkName:'home'*/'../components/home');
    const Home1 = ()=> import(/*webpackChunkName:'home'*/'../components/home1')
    const Login = r => require.ensure([],()=>r(require('../components/login'),'login')
    new Router({
    	routes:[
    		{
    			name:"index",
    			path:"/index",
    			component:resolve => require([''../components/index"], resolve)
    			// 第一种 : 异步组件将每一个组件生成一个js文件
    		},
    		{
    			name:"home",
    			path:"/home",
    			component:Home 
    		},
    		{
    			name:"home1",
    			path:"/home1",
    			component:Home 
    		},
    		// 第二种 : 会将webpackChunkName名字相同的生成一个js文件		
    		{
    			name:"login",
    			path:"/login",
    			component:Login 
    		}
    		// 第三种 : 和第二种方法类似但是可以单独引入依赖会将名字相同的生成一个js文件	
    	]
    })
    
    
    require.ensure(dependencies: String[], callback: function(require), chunkName: String)
    

    resolve => require([’’],resolve)
    import(/* webpackChunkName:’‘chunkname */ ‘’)
    r => require.ensure([],() => r(require(’’)),‘chunkname’)

    展开全文
  • vue 组件懒加载引入

    千次阅读 2019-05-23 14:44:31
    非常简单 components: { appview : resolve => require(["./components/AppView"],resolve) }

    非常简单

    components: {
    
    appview : resolve => require(["./components/AppView"],resolve)
    
    }

     

    展开全文
  • 一、 什么是懒加载 懒加载也叫延迟加载,即在需要的时候...三、如何与webpack配合实现组件懒加载 1、在webpack配置文件中的output路径配置chunkFilename属性 output: { path: resolve(__dirname, 'dist'), filename:
  • 最近研究了vue性能优化,涉及到vue异步组件懒加载。一番研究得出如下的解决方案。 原理:利用webpack对代码进行分割是懒加载的前提,懒加载就是异步调用组件,需要时候才下载。 案例: 首先是组件,创建四个组件...
  • vue路由组件懒加载介绍及使用

    千次阅读 2018-11-04 17:55:30
    vue组件懒加载又称为代码分割,也叫延迟加载,即在需要的时候进行加载,随用随载。 二、为什么要使用路由组件懒加载vue这种单页面应用,如果没有应用懒加载,运用webpack打包后的文件将会异常的大,造成...

    一、什么是懒加载

    在vue中组件懒加载又称为代码分割,也叫延迟加载,即在需要的时候进行加载,随用随载。

    二、为什么要使用路由组件懒加载

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

    简单的说就是:进入首页不用一次加载过多资源造成用时过长!!!

    三、使用方式

    (1)没有使用路由懒加载

    import MSite from '../pages/MSite/MSite.vue'
    export default new VueRouter({
        routes:[
            {
                path:'/msite',
                component:MSite,
            },
        ]
    })

    (2)使用了路由懒加载

    const MSite = () => import('../pages/MSite/MSite.vue')
    export default new VueRouter({
        routes:[
            {
                path:'/msite',
                component:MSite,
            },
        ]
    })

    如上所示,只是将import MSite from '../pages/MSite/MSite.vue'改成const MSite = () => import('../pages/MSite/MSite.vue')即实现了路由懒加载的效果,原因很简单:第二种方式返回路由组件的函数,只有执行此函数才会加载对应的组件。

    也就是说,在执行入口js也就是main.js时,执行到const MSite = () => import('../pages/MSite/MSite.vue')时,仅仅是申明了你这个路由组件,而并没有真正去请求它,当你点击相应路由链接时才会去请求它,并且,只有第一次点击才会去请求,后续不会再重复请求。

    展开全文
  • 懒加载实质是让页面非必须资源延迟加载,减少页面加载用时,从而达到页面性能优化的目的。 注意:本文涉及的懒加载配置都是基于webpack4.6.0,如果示例代码有错误,请先检查webpack版本。...在vue工程中,加...
  • Vue组件代码分块和懒加载

    千次阅读 2019-12-25 18:40:00
    前端开发中,随着业务和页面增加,以组件为基本单位的结构下,组件数量会增长极快,为了优化我们会很显然地想要进行一些工作: 代码分块 懒加载非必要资源文件 非必要资源,指的首次渲染出某页面所不必要的资源,...
  • 主要介绍了Vue Router的懒加载路径的解决方法,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
  • vue异步组件懒加载(按需加载) 利用webpack对代码进行分割是懒加载的前提,懒加载就是异步调用组件,需要时候才下载(按需加载)。 为什么需要懒加载? 在单页应用中,如果没有应用懒加载,运用webpack打包后的文件...
  • 主要介绍了vue-router懒加载速度缓慢问题及解决方法,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
  • React和Vue组件懒加载

    千次阅读 2018-08-06 19:30:50
    懒加载,也可以成为按需加载,即页面、数据或者组件在需要加载的时候才进行加载,在开始只加载需要的最少的静态资源和数据信息,尽快的展示首屏页面。 现在先不谈技术,谈谈为什么需要按需加载。有调查显示:页面的...
  • 主要介绍了vue+element树组件 实现树懒加载的过程,本文通过图文实例代码相结合给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • 在写项目的时候,需要动态配置路由菜单,所有的菜单都是通过配置生成的,这就意味着菜单的路径(在vue开发项目里面就是一个字符串的路径)需要异步加载进去,但是由于对webpack的import不是很熟悉,所以就有一下的坑...
  • 为给客户更好的客户体验,首屏组件加载速度更快一些,解决白屏问题。 二、定义 加载简单来说就是延迟加载或按需加载,即在需要的时候的时候进行加载。 三、路由加载使用 常用的加载方式有两种:即使用vue异步...
  • 今天小编就为大家分享一篇vue-cli监听组件加载完成的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 路由懒加载在访问页面的时候非常重要,能够提高首页加载速度,避免出现加载时候白页,如果没有懒加载,webpack打包后的文件会非常大。 import按需加载(常用) vue异步组件 webpack提供的require.ensure() 1、...
  • 问题原因: import 属于异步引用组件,需要特殊的 babel-loader 处理 解决: npm i babel-plugin-syntax-dynamic-import -D 在 .bablerc 中引入 syntax-dynamic-import 插件 { "presets": ["env"], "plugins": [...
  • 在大型单页面应用中,处于对性能的考虑和首屏加载速度的要求,我们一般都会使用webpack的代码分割和vue-router的路由懒加载功能将我们的代码分成一个个模块,并且只在需要的时候才从服务器加载一个模块。 但是这种...
  • 主要介绍了vue-router懒加载解决首次加载时资源过多导致的速度缓慢问题,文中单独给大家介绍了vue router路由懒加载问题,需要的朋友可以参考下
  • vue懒加载实现及其原理

    千次阅读 2019-12-14 00:39:07
    vue实现懒加载 html <template> <div ref='wrap'> <div v-for="(item, index) in datalistMy" :key="index">{{ index+1 }}</div> </div> </template> ...
  • 主要介绍了在 vue 路由懒加载中给 Webpack Chunks 命名的方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
  • 用过vue-router都知道它可以实现模块js的懒加载,即只有当需要时才去加载对应模块的js脚本文件,以加速主页的显示。比如只有第一次用户点击某个“用户信息”按钮或菜单时,才下载“用户信息”这个模块的js组件...
  • 基于vue懒加载插件 - 实现图片或者其他资源进入可视区域后加载
  • 背景: 目前我们项目都是按组件划分的,然后各个组件之间封装成产品。目前都是采用iframe直接嵌套页面。...目前采用Vue动态加载异步组件的方式来实现小组件之间的通信。当然门户也要提供一个通信的基线:Vu

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 79,005
精华内容 31,602
关键字:

vue组件懒加载

vue 订阅
友情链接: 5535261.zip