精华内容
下载资源
问答
  • vue路由懒加载实现原理
    2020-10-21 10:24:21

    vue路由懒加载和组件懒加载其实原理一样
    常用的懒加载方式有两种:即使用vue异步组件 和 ES中的import

    路由懒加载
    ES 提出的import方法,
    方法如下:const HelloWorld = ()=>import('需要加载的模块地址')
    (不加 { } ,表示直接return)
    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>
    const One = ()=>import("./one");
    export default {
      components:{
        "One-com":One
      },
      data () {
        return {
          msg: 'Welcome to Your Vue.js App'
        }
      }
    }
    </script>

    更多相关内容
  • 主要介绍了vue-router路由懒加载实现(解决vue项目首次加载慢),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 懒加载简单来说就是延迟加载或按需加载,即在需要的时候的时候进行加载。这篇文章主要介绍了vue路由懒加载及组件懒加载 ,需要的朋友可以参考下
  • vue.js写单页面应用时,会出现打包后的JavaScript包非常大,影响页面加载,我们可以利用路由懒加载去优化这个问题,当我们用到某个路由后,才去加载对应的组件,这样就会更加高效,实现代码如下: import Vue ...
  • Vue路由懒加载

    2021-05-31 17:55:30
    路由懒加载的主要原理就是原本的Vue模块是全部导入在一起的打包文件,运行后用户查看相关模块显示的内容时会将整个打包的文件引入而后在其中查找对应的模块然后才将其呈现给用户。这样会使得在打包文件中查找对应...

    懒加载原理:
    路由懒加载的主要原理就是原本的Vue模块是全部导入在一起的打包文件,运行后用户查看相关模块显示的内容时
    会将整个打包的文件引入而后在其中查找对应的模块然后才将其呈现给用户。这样会使得在打包文件中查找对应模块时
    在浏览器中可能会出现短暂的空白页,从而降低用户体验。而路由懒加载是将各个模块分开打包,在用户查看下相关模
    块内容时就直接引入相关模块的打包文件然后进行显示,从而有效的解决了浏览器可能出现短暂时间空白页的情况。

    具体操作如下例

    //原本将所有模块全部导入
    // import home from '../components/home';
    // import about from '../components/about';
    // import user from '../components/user';
    
    //路由懒加载方式,在用到对应的模块时才会执行导入
    const home = () =>
        import ('../components/home');
    const about = () =>
        import ('../components/about');
    const user = () =>
        import ('../components/user');
    const homeNews = () =>
        import ('../components/homeNews');
    const homeMessage = () =>
        import ('../components/homeMessage')
    
    //通过Vue.use(插件),安装插件
    Vue.use(VueRouter)
    
    //创建VueRouter对象
    const routes = [{
            path: '',
            //重定向设置,默认显示的hash为home
            redirect: '/home'
        },
        {
            path: '/home',
            component: home
        },
        {
            path: '/about',
            component: about
        },
        {
            path: '/user/:userId',
            component: user
        }
    ]
    
    展开全文
  • vue-router 路由懒加载原理及方式

    千次阅读 2020-08-07 21:57:48
    结合 Vue 的异步组件和 Webpack 的代码分割功能,轻松实现路由组件的懒加载。 webpack打包会将所有资源文件合并压缩成一个文件,导致最终的文件非常大,甚至超过几M,以致页面首次加载会比较慢,如下图: 其中红色...

    当打包构建应用时,JavaScript 包会变得非常大,影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了。

    结合 Vue 的异步组件和 Webpack 的代码分割功能,轻松实现路由组件的懒加载。

    webpack打包会将所有资源文件合并压缩成一个文件,导致最终的文件非常大,甚至超过几M,以致页面首次加载会比较慢,如下图:
    在这里插入图片描述

    其中红色标出的是在浏览器中加载的js文件,gzip压缩前已经达到500多KB了。

    再看看路由按需加载后:
    在这里插入图片描述

    文件被拆成一个个小的文件,即webpack的文件分割。这里是以页面为单位进行切割。具体实现如下:

    通常情况下,我们引入vue文件的方式是

    import RankList from ‘@/components/RankList’

    然后在router里面配置

    {
          path: '/rank-list',
          name: 'RankList',
          meta: {
            title: '排行榜'
          },
          component: RankList
    }
    

    按需加载只需要修改vue文件的引入方式:

    {
        path: "/about",
        name: "About",
        // route level code-splitting
        // this generates a separate chunk (about.[hash].js) for this route
        // which is lazy-loaded when the route is visited.
        component: () =>
          import(/* webpackChunkName: "about" */ "../views/About.vue")
      },
    

    /* webpackChunkName: “RankList” */ 是打包后文件名称,后面是文件路径。
    ‘@/components/RankList’ 是文件路径。

    在这里插入图片描述
    在这里插入图片描述

    // 路由懒加载写法
    const Home = () => import ("../views/Home.vue");
    const My = () => import ("../views/My.vue");
    const HomeNews = () => import ("../components/HomeNews.vue");
    const HomeMsg = () => import ("../components/HomeMsg.vue");
    

    参考:https://www.cnblogs.com/hutuzhu/p/10407258.html

    https://www.cnblogs.com/mica/p/10700397.html

    展开全文
  • Vue是可以自定义指令的,最近学习过程中遇见了一个需要懒加载的功能,发现网上这方面的资料较少,所以下面这篇文章主要给大家介绍了关于Vue.js如何实现路由懒加载的相关资料,需要的朋友可以参考借鉴,下面来一起看看...
  • 因为Vue 是SPA,所以首页第一次加载时会把所有的组件以及组件相关的资源全都加载了。这样就会导致首页加载加载了许多首页用不上的资源,造成网站首页打开速度变慢,...本文将对懒加载实现原理以及使用进行讲解。

    前言

    Vue 为什么需要懒加载(按需加载)?

    学习Vue的时候,各类教程都会告诉我们:Vue 的特点是SPA——Single Page Application(单页应用程序)。它有着诸如:“只有第一次会加载页面, 以后的每次页面切换,只需要进行组件替换;减少了请求体积,加快页面响应速度,降低了对服务器的压力” 等等优点。

    但是呢!因为Vue 是SPA,所以首页第一次加载时会把所有的组件以及组件相关的资源全都加载了。这样就会导致首页加载时加载了许多首页用不上的资源,造成网站首页打开速度变慢的问题,降低用户体验。

    为了解决上面问题,我们需要对Vue实现组件懒加载(按需加载)。

    阅前悉知:

    下面,我将简单讲解一下Javascript的懒加载(按需加载)原理以及在Vue上的应用。
    原理部分为我个人参考多篇文章总结而来,有可能存在错误。希望大家在阅读时,抱着质疑的态度去阅读
    ·········································································································································
    本文所讲的JS、webpack以及VueCLI版本分别为:

    • Javascript:ES2015(ES6)及以上
    • webpack:webpack v4及以上
    • VueCLI: VueCLI v4

    什么是懒加载(按需加载)?

    懒加载或者按需加载,是一种很好的优化网页或应用的方式。这种方式实际上是先把你的代码在一些逻辑断点处分离开,然后在一些代码块中完成某些操作后,立即引用或即将引用另外一些新的代码块。这样加快了应用的初始加载速度,减轻了它的总体体积,因为某些代码块可能永远不会被加载。
    —— 摘自《webpack——懒加载》

    上面这段话,用一句俗语讲就是“占着茅坑不拉屎”。先占着茅坑,屎意来的时候再来!

    也就是,组件先在路由里注册但不进行组件的加载与执行,等到需要访问组件的时候才进行真正的加载。

    懒加载(按需加载)的前提

    懒加载前提
    进行懒加载的子模块(子组件)需要是一个单独的文件。

    为什么呢?因为懒加载是对子模块(子组件)进行延后加载。如果子模块(子组件)不单独打包,而是和别的模块掺和在一起,那其他模块加载时就会将整个文件加载出来了。这样子模块(子组件)就被提前加载出来了。

    所以,要实现懒加载,就得先将进行懒加载的子模块(子组件)分离出来

    懒加载前提的实现:ES6的动态地加载模块——import()

    调用 import() 之处,被作为分离的模块起点,意思是,被请求的模块和它引用的所有子模块,会分离到一个单独的 chunk 中。
    ——摘自《webpack——模块方法》的import()小节

    简单来讲就是,通过import()引用的子模块会被单独分离出来,打包成一个单独的文件(打包出来的文件被称为chunk )。

    这里有个知识的前提:
    项目通过webpack打包时会进行资源整合,也就是会把项目中的JS、CSS等文件按照一定的规则进行合并,已达到减少资源请求的目的。

    依照webpack原本的打包规则打包项目,我们就无法确定子模块在打包出来的哪个JS文件中,而且子模块的代码会和其他代码混合在同一个文件中。这样就无法进行懒加载操作。所以,要实现懒加载,就得保证懒加载的子模块代码单独打包在一个文件中。

    代码示例:

    构建一个简单的webpack项目:

    1. 首先,webpack.config.js 文件配置如下:
    /*webpack.config.js*/
    
    const path = require('path')
    
    module.exports = {
        entry:'./src/main.js', //入口文件
        output: {
            path: path.resolve(__dirname, 'dist'),
            chunkFilename: '[name].bundle.js',
            filename: 'bundle.js',
        }
    }
    
    1. 创建入口文件main,js
    /* main.js */
    
    // 这里引入con.js,注意没有使用import()
    
    require('./con.js')
    
    1. 创建被引入文件con.js
    /* con.js */
    function cons(){
      console.log("123")
    }
    
    module.exports = {cons}
    

    具体目录结构如下:
    目录结构
    接着运行npm run build进行打包。结果如下:
    在这里插入图片描述
    可以看到使用require()引入con.js,打包后的结果是con.js合并到的bundle.js

    打开bundle.js,可以看到con.js代码被嵌入bundle.js
    在这里插入图片描述
    接下来,使用import()引入con.js

    /* main.js */
    
    // 这里使用import()引入con.js
    import(/* webpackChunkName: "con" */ './con.js')
    

    打包结果如下:

    在这里插入图片描述
    展开bundle.js
    在这里插入图片描述
    可以看到,使用import()引入con.jscon.js打包成独立的js文件。

    注意:
    上面的例子,使用的都是同一套webpackconfig.js配置文件。所以,实现上面功能仅仅是因为import()的使用。

    小知识点:import()中的注释

    我们注意到,import()括号里面有一串注释。如:

    import(/* webpackChunkName: "con" */ './con.js')
    

    它并不是可有可无的东西。通过这个注释,再配合webpack.config.jsoutput.chunkFilename,我们可以设置打包生成的文件(chunk)的名字。
    例如,上面例子的webpack配置:

    module.exports = {
        entry:'./src/main.js', //入口文件
        output: {
            path: path.resolve(__dirname, 'dist'),
            chunkFilename: '[name].bundle.js',
            filename: 'bundle.js',
        }
    }
    

    这里设定了chunkFilename的命名规则为:[name]+.+bundle.js。这里的[name]就是/* webpackChunkName: "con" */设定的值。

    除了webpackChunkName,还有其他属性设定,详情请看webpack——Magic Comments

    再说明一点:
    webpack 打包生成的chunk有一下几种:

    • webpack当中配置的入口文件(entry)是chunk,可以理解为entry chunk;
    • 入口文件以及它的依赖文件通过code split (代码分割)出来的也是chunk(也就是我们这里一直讲到的),可以理解为children chunk;
    • 通过commonsChunkPlugin创建出来的文件也是chunk,可以理解为commons chunk;
      —— 摘自《 webpack配置中常用的CommonsChunkPlugin认识

    注意:CommonsChunkPlugin 已经从 webpack v4(代号 legato)中移除。想要了解最新版本是如何处理 chunk,请查看 SplitChunksPlugin

    借助import(),我们实现了子模块(子组件)的独立打包(children chunk)。现在,距离实现懒加载(按需加载) 还差关键的一步——如何正确使用独立打包的子模块文件(children chunk)实现懒加载。这也是懒加载的原理。

    借助函数实现懒加载(按需加载)

    首先,我们先来回顾一下JavaScript函数的特性。

    无论使用函数声明还是函数表达式创建函数,函数被创建后并不会立即执行函数内部的代码,只有等到函数被调用之后,才执行内部的代码。

    相信对于这个函数特性,大家都十分清楚的。看到这里,大家对于懒加载的实现可能已经有了思路。

    没错!

    只要将需要进行懒加载的子模块文件(children chunk)的引入语句(本文特指import())放到一个函数内部。然后在需要加载的时候再执行该函数。这样就可以实现懒加载(按需加载)

    这也是懒加载的原理了。

    将上面例子补充完整:

    新增页面文件index.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>懒加载演示</title>
    </head>
    <body>
        <button class="button1" style="cursor: pointer;">懒加载 con.js</button>
        <script src="bundle.js"></script>
    </body>
    </html>
    

    main.js改动如下:

    window.onload = () => {
        const btn = document.querySelector('.button1')
        
        // 给按钮添加click事件,按钮被点击后,加载 con.js
        btn.onclick = () => import(/* webpackChunkName: "con" */ './con.js')
    }
    

    目录结构如下:
    在这里插入图片描述
    打包后,运行项目:

    在这里插入图片描述
    可以看到,con.js实现了懒加载(按需加载)

    懒加载(按需加载)实现原理的概括

    回顾前两节的内容,懒加载(按需加载)原理分为两步:

    1. 将需要进行懒加载的子模块打包成独立的文件(children chunk);
    2. 借助函数来实现延迟执行子模块的加载代码;

    是不是很简单呀!这里的技术难点就是如何将懒加载的子模块打包成独立的文件。好在ES6提供了import()。然后这一切就变得十分简单了。

    在 Vue-router 实现路由懒加载(按需加载)

    讲了这么多,最后再来讲讲懒加载在vue-router的使用吧!
    有了前面的基础,在vue上使用懒加载就变得很简单了。

    以往,我们配置vue-router是这样的:

    import Vue from 'vue'
    import VueRouter from 'vue-router'
    
    // 这里引入子模块
    import Home from '../views/Home.vue'
    
    Vue.use(VueRouter)
    
    const routes = [{
        path: '/',
        name: 'Home',
        component: Home
      }
    ]
    
    const router = new VueRouter({
      mode: 'history',
      routes
    })
    
    export default router
    

    上面的例子先加载子组件,然后将子组件命名为Home,最后再将Home赋给Vue的 component。这样就导致子组件的提前加载。

    接下来,实现子组件懒加载,则改动如下:

    import Vue from 'vue'
    import VueRouter from 'vue-router'
    
    Vue.use(VueRouter)
    
    const routes = [{
        path: '/',
        name: 'Home',
        // 将子组件加载语句封装到一个function中,将function赋给component
        component: () => import( /* webpackChunkName: "home" */ '../views/Home.vue')
      }
    ]
    
    const router = new VueRouter({
      mode: 'history',
      routes
    })
    
    export default router
    

    将子组件加载语句封装到一个function中,将function赋给component。这样就可以实现Vue-router懒加载(按需加载)

    是不是非常简单!哈哈!

    可能这里有人会疑惑,component可以接收一个function吗?
    这确实可以的。不要被以往的观念束缚。component是对象的一个属性,在Javascript中属性的值是什么类型都可以。

    关于懒加载(按需加载) 在Vue中的应用,详细可参考:《Lazy Load in Vue using Webpack’s code splitting》

    简述另一种子模块打包方法:

    除了ES6 的import()这个方法,webpack本身还提供了另一个方法—— require.ensure()

    require.ensure() 是 webpack 特有的,已经被 import() 取代。
    ——摘自《webpack——module-methods:require.ensure》

    大概用法如下:

      {
        path: '/home',
        name: 'home',
        component: resolve  => require.ensure([], () => resolve (require('@/components/home')), 'demo')
      },
    

    关于require.ensure()更多内容可查看:《webpack——module-methods:require.ensure》《vue路由懒加载》

    结语

    至此,关于懒加载(按需加载) 的说明就结束了。刚开始时对这部分还是挺畏惧的。心想着懒加载,这么高大上的东西一定非常难。后来查阅许多资料,仔细研究后,逐渐了解了懒加载,并借着写这篇文章的机会,边写边学,进一步巩固知识点,算是对懒加载有了较深的理解吧。其实,仔细看来懒加载的原理并不是很复杂。希望本文对大家有所启发与帮助。

    其中可能存在错误,希望各位大佬踊跃指出。

    参考文档

    展开全文
  • 路由 懒加载 具体的实现: var router = new VueRouter ({ routes:[ { path: '/public', name: 'public', component: () = > { // 使用import 引入 import('./components/t
  • 最近研究了vue性能优化,涉及到vue异步组件和懒加载。一番研究得出如下的解决方案。 原理:利用webpack对代码进行分割是懒加载的前提,懒加载就是异步调用组件,需要时候才下载。 案例: 首先是组件,创建四个组件...
  • 路由懒加载原理及使用

    千次阅读 2020-07-23 17:06:40
    加载解决的问题: 避免进入首页就加载全部的前端资源造成用户等待时间过长的问题。 就好比,访问 login 页面,你返回的 js 路由...Vue路由懒加载原理说明 1) 我们一开始用ES6的写法,在路由文件router/index.js中
  • 当项目打包时路由里的所有component都会打包在一个js中,在项目刚进入首页的时候,就会加载所有的组件,所以导致首页加载较慢, 一、Vue异步加载技术 vue-router配置路由,使用vue的异步组件技术,可以实现懒加载,...
  • 原理分析 先将img标签的src链接设为同一张图片(默认图片),当js监听到该图片进入可视窗口时,再将实际地址应用。 实现方法 判断元素是否在可视范围 /** * 判断元素是否在可视范围 */ function isVisible(ele...
  • 结合 Vue 的异步组件和 Webpack 的代码分割功能,轻松实现路由组件的懒加载. Vue 的异步组件 webpack代码分割 建议首先熟读这两个知识点,会更容易理解懒加载原理。本文的源码地址在--&gt...
  • 文章目录使用路由懒加载的原因路由懒加载使用前后对比懒加载的三种方式 使用路由懒加载的原因 路由懒加载使用前后对比 没有使用路由懒加载时 解析下面三个文件分别的作用 app文件是自己写的业务代码的整合,...
  • Vue 路由懒加载与块加载 懒加载:把一些加载得资源延后,比如用户没有访问的网页,我们就先不请求数据回来 这里要提到一个spa应用的概念 spa应用 :single page application (单页应用):是结合web端与app端的优点,可以把...
  • 路由懒加载  前言:   我们都知道网页默认刚打开的时候,就去加载了所有的页面,首屏加载速度变得很缓慢。而路由懒加载就是只加载你当前进入的那个模块页面。按需加载路由对应的资源,可以提高首屏加载速度( 注:...
  • vue路由组件懒加载介绍及使用

    千次阅读 2018-11-04 17:55:30
    二、为什么要使用路由组件懒加载vue这种单页面应用,如果没有应用懒加载,运用webpack打包后的文件将会异常的大,造成进入首页时,需要加载的内容过多,时间过长,会出啊先长时间的白屏,即使做了loading也是不...
  • 其实不管是vue还是react,其路由懒加载实现得益于wepack的异步模块打包,其原理就是利用es6 import()函数。这个import不是import命令。同样是引入模块,import命令是同步引入模块,而import()函数动态引入。当 ...
  • export default new VueRouter({ routes: [ { path: '/', component: () => import('../components/Navigator') } ] }) 使用路由懒加载的写法,只会在进入当前这个路由时候才会走 component ,然后在运行import...
  • vue项目打包的时候,如果项目比较庞大,那么将会打出一个很大的包,速度比较慢,这个时候可以考虑拆分,不要把所有的内容都打到一个包里面去。但是在开发环境时使用lazy-loading会影响开发效率,小的项目还好,大的...
  • 认识路由懒加载 官方的解释: 当打包构建应用时,Javascript 包会变得非常大,影响页面加载。 如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了 官方...
  • vue的SPA(Single Page Application)应用里,当(webpack)打包构建时,会把所有的...目前有三种方式实现路由组件的懒加载,分别是: vue异步组件 es 的 import() webpack的require.ensure() 一..
  • 路由懒加载 目录 异步组件 异步组件介绍 异步组件声明 高级异步组件 路由懒加载 路由懒加载介绍 路由懒加载方法 把组件按组分块 异步组件 异步组件介绍 在开发大型项目的时候,我们会把大型项目根据组件...
  • vue组件懒加载

    千次阅读 2021-09-23 12:58:10
    vue组件懒加载 ...1.1 使用import实现懒加载 router import Vue from 'vue' import VueRouter from 'vue-router' ​ Vue.use(VueRouter) ​ /* // 原始加载方式 import Views from "@/views" import First fr
  • vue路由实现原理总结

    2020-11-05 19:54:14
    1.vue路由的两种模式 hash模式: 比如 'http://www.baidu.com/#/abc' hash 的值为 '#/abc' 它的特点在于:hash 虽然出现 URL 中,但不会被包含在 HTTP 请求中,因此改变 hash 不会重新加载页面 但是会触发 ...
  • 目录一、概念二、两种实现方式HashHistory简介特点方法HashHistory.push()...更新视图但不重新请求页面,是前端路由原理的核心之一,目前在浏览器环境中这一功能的实现主要有2种方式: Hash—利用URL中的hash(“#”);
  • 路由懒加载详解

    千次阅读 2021-12-31 08:11:25
    实现原理:将路由相关的组件,不再直接导入了,而是改写成异步组件的写法,只有当函数被调用的时候,才去加载对应的组件内容。 2.传统路由配置: import Vue from 'vue' import VueRouter from 'vue-router' ...
  • 原文:https://segmentfault.com/a/1190000022846552前言说起路由懒加载,大家很快就知道怎么实现它,但是问到路由懒加载原理,怕有一部分小伙伴是一头...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 12,598
精华内容 5,039
关键字:

vue路由懒加载实现原理

友情链接: RBTree.rar