精华内容
下载资源
问答
  • 懒加载简单来说就是延迟加载或按需加载,即在需要的时候的时候进行加载。这篇文章主要介绍了vue路由懒加载及组件懒加载 ,需要的朋友可以参考下
  • 实现vue路由懒加载遇到的问题 https://blog.csdn.net/qq_36413371/article/details/102581369
  • 本篇文章主要介绍了vue路由懒加载的实现方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 在Web应用程序中,系统的瓶颈常在于系统的响应...像vue这种单页面应用,如果没有应用懒加载,运用webpack打包后的文件将会异常的大,造成进入首页时,需要加载的内容过多,时间过长,会出啊先长时间的白屏,即使做了loa
  • 主要介绍了在 vue 路由懒加载中给 Webpack Chunks 命名的方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
  • vue路由懒加载

    万次阅读 2018-01-19 10:33:31
    路由懒加载能够提高页面的加载速度,不过使用也得看场合。有时候需要懒加载,提升首页加载速度,一般是页面层级较为复杂的时候。大家看一下不加代码分割浏览器加载的文件。 这里蓝色部分是webpack自动分割出来的,...

    路由懒加载能够提高页面的加载速度,不过使用也得看场合。有时候需要懒加载,提升首页加载速度,一般是页面层级较为复杂的时候。大家看一下不加代码分割浏览器加载的文件。

    这里蓝色部分是webpack自动分割出来的,当修改业务js时候manifestvendor是不会改变的,浏览器直接在缓存中提取。

    会变的是app.js。如果不采用路由分割会是什么效果呢。所有的代码都打包到app.js中,如果项目巨大,那么首页加载会是灾难。

    那么vue的官方脚手架采用的是webpack打包的一套配置,那么要理解路由懒加载就要从webpack的代码分割的打包模式说起啦。微笑得意

    webpack代码分割

    webpack 可以帮助我们将代码分成不同的逻辑块,在需要的时候加载这些代码。
    使用 require.ensure() 来拆分代码
    require.ensure() 是一种使用 CommonJS 的形式来异步加载模块的策略。在代码中通过 require.ensure([<fileurl>]) 引用模块
    require.ensure(dependencies: String[], callback: function(require), chunkName: String)
    第一个参数指定依赖的模块,
    第二个参数是一个函数,
    在这个函数里面你可以使用 require 来加载其他的模块,webpack 会收集 ensure 中的依赖,将其打包在一个单独的文件中,
    在后续用到的时候使用 jsonp 异步地加载进去。


    既然讲了那就讲多一点吧,感觉要跑题了,但是我又收不住内心的激动。加啥,当然是Commonjs异步加载js文件啦。

    js懒加载

    直接上代代码吧,看着直接。
    require.ensure(['./a'],function(require){
        let b = require('./b');
        let a = require('./a');
        console.log(a+b);
    })
    以上代码,a 和 b 会被打包在一起,在代码中执行到这段代码的时候,会异步地去加载,加载完成后执行函数里面的逻辑。

    那就是说a和b合并成一个文件,代码走到这里的时候才会去下载这个文件。当然这里是不是要加一个转圈呢啥的,毕竟是异步加载嘛。
    这个稍微麻烦点,可以自己去百度之微笑。我这里只是抛个砖,自己找玉去吧。收。偷笑

    webpack代码分割

    还记得webpack中的chunkFilename吗?不知道没关系。偷笑

    output: {
        path: config.build.assetsRoot,
        filename: utils.assetsPath('js/[name].[chunkhash].js'),
        chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
      },

    扣了一小段代码。这个是vue脚手架里面的。在build/webpack.prod.conf.js文件中,这个是走npm run build才会进来的。

    那怎么配合chunkFilename做代码分割呢。

    上代码:
    require.ensure(['./c'],function(require){
       let a = require('./a');
       console.log(a);
    },'d');
    require.ensure(['./c'],function(require){
       let b = require('./b');
       console.log(b);
    },'d');
    简单介绍下以上代码,这儿‘d’就是最终打包成的chunkFilename 中的name。

    chunkFilename: utils.assetsPath('js/[name].[chunkhash].js')

    name最终a,b,c会被打包到一个叫d.hash.js的文件中去。大笑

    大家也理解的差不多了把。前面稍微铺了一点,也抛了不少砖头。

    讲讲vue路由懒加载

    直接上代码啦。 代码结构是这样的



    红色方框中就是做路由懒加载的代码啦。是不是so easy
    const tvProgram = resolve => require(['@/page/tvProgram'], resolve);
    const game = resolve => require(['@/page/gameIndex'], resolve);
    const gameitem = resolve => require(['@/page/gameItem'], resolve);
    熟不熟悉。这里采用的是AMD模式。 那这里没有指定chunkFileName啊,其实不用担心。 chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')

    这里用的是id

    这是最简单的写法啦。
    首页是这样的。

    然后第二个界面是这样的。


    分割啦。。。。。。。。。 偷笑
    那么问题来了什么是 require.ensure什么是require([],function)敲打敲打敲打

    require-ensurerequire-amd的区别:                            

    require-amd 
    • 说明: 同AMD规范的require函数,使用时传递一个模块数组和回调函数,模块都被下载下来且都被执行后才执行回调函数
    • 语法: require(dependencies: String[], [callback: function(...)])
    • 参数 
      • dependencies: 模块依赖数组
      • callback: 回调函数

    require-ensure 
    • 说明: require.ensure在需要的时候才下载依赖的模块,当参数指定的模块都下载下来了(下载下来的模块还没执行),便执行参数指定的回调函数。require.ensure会创建一个chunk,且可以指定该chunk的名称,如果这个chunk名已经存在了,则将本次依赖的模块合并到已经存在的chunk中,最后这个chunk在webpack构建的时候会单独生成一个文件。
    • 语法: require.ensure(dependencies: String[], callback: function([require]), [chunkName: String]) 
      • dependencies: 依赖的模块数组
      • callback: 回调函数,该函数调用时会传一个require参数
      • chunkName: 模块名,用于构建时生成文件时命名使用
    • 注意点:requi.ensure的模块只会被下载下来,不会被执行,只有在回调函数使用require(模块名)后,这个模块才会被执行。


    展开全文
  • 最近研究了vue性能优化,涉及到vue异步组件和懒加载。一番研究得出如下的解决方案。 原理:利用webpack对代码进行分割是懒加载的前提,懒加载就是异步调用组件,需要时候才下载。 案例: 首先是组件,创建四个组件...
  • 这样就是vue路由懒加载。 2、常用的懒加载方式有两种:即使用ES中的import和vue异步组件 2.1 未使用懒加载 import HelloWorld from '@/components/HelloWorld' export default new Router({ routes: [ { p...

    1、当一个vue项目很大的时候,对于一些“暂时”用不到的组件,我们可以不进行加载,等到用到次组件时再加载。这样可以优化spa应用首次加载白屏情况,也给用户更好的体验。这样就是vue路由懒加载。

    2、常用的懒加载方式有两种:即使用 ES中的import  和 vue异步组件 

    2.1 未使用懒加载

    import HelloWorld from '@/components/HelloWorld'
     
    export default new Router({
      routes: [
        {
          path: '/',
          name: 'HelloWorld',
          component:HelloWorld
        }
      ]
    })
    2.2  使用ES中的import进行懒加载  (推荐使用,也是最常用的)

    const HelloWorld = () => import("@/components/HelloWorld");
    export default new Router({
      routes: [{
        path: '/',
        name: 'HelloWorld',
        component: HelloWorld
      }]
    })
     
    /*或者*/
     
    export default new Router({
      routes: [{
        path: '/',
        name: 'HelloWorld',
        component: () => import("@/components/HelloWorld")
      }]
    })
    2.3  使用VUE中的异步组件进行懒加载

    export default new Router({
      routes: [{
        path: '/',
        name: 'HelloWorld',
        component: resolve => { require(['@/components/HelloWorld'],resovle); }
      }]
    })
     

    展开全文
  • 一、是什么 路由:即url,vue中一个url对应一个组件 懒加载:用到时,再加载 二、为什么有 ...当打包构建应用时,js包会变得特别大,影响页面加载 可以把不同路由对应的组件分割成不同...五、路由懒加载效果 懒加载方式
  • 路由懒加载 export default { path : '/index' , name : 'Index' , ** //这一行是最重要的** component : ( ) => import ( /*webpackChunkName:"index"*/ '../views/index/index.vue' ) , ** //...

    一般的方式

    import shopRoutes from './shop/index.routes.js';
    import storeRoutes from './store/index.routes.js';
    import priceRoutes from './price/index.routes.js';
    ...
    
    const routes = {
       
        {
        path: '/'
    展开全文
  • 使用路由懒加载的原因 当打包构建应用时,JavaScript 包会变得非常大,影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了。 实现路由懒...

    使用路由懒加载的原因

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

    实现路由懒加载的方式(介绍2个主流的方法)

    1.vue异步组件技术 ==== 异步加载

    采用resolve => require([‘vue文件路径’],resolve)

    {
        path: 'student',
        name: 'Student',
        meta: {
            title: '学生管理',
            auth: true
        },
        // 采用resolve => require(['vue文件路径'],resolve)
        component: resolve => require(['./views/Student.vue'], resolve)
    }
    

    2.组件懒加载方案二 路由懒加载(使用import)

    采用() => import(‘vue文件路径’)

    {
        path: 'student',
        name: 'Student',
        meta: {
            title: '学生管理',
            auth: true
        },
        // 采用() => import('vue文件路径')
        component: () => import('./views/Student.vue')
    }
    

    路由懒加载出现的问题

    使用方法二,即采用:() => import(’./views/Student.vue’),采用导航栏的相对路径显示在router-view中时会报以下错误:


    Loading chunk {n} failed 错误
    在这里插入图片描述


    解决办法:采用方法一的方式,即采用resolve => require([‘vue文件路径’],resolve)**来实现路由懒加载,问题得以解决!

    展开全文
  • 问题原因: import 属于异步引用组件,需要特殊的 babel-loader 处理 解决: npm i babel-plugin-syntax-dynamic-import -D 在 .bablerc 中引入 syntax-dynamic-import 插件 { "presets": ["env"], ...
  • vue路由懒加载的3种方法

    千次阅读 2020-08-31 15:11:30
    路由懒加载在访问页面的时候非常重要,能够提高首页加载速度,避免出现加载时候白页,如果没有懒加载,webpack打包后的文件会非常大。 import按需加载(常用) vue异步组件 webpack提供的require.ensure() 1、import...
  • 什么是路由懒加载? 不同组件有不同的 js 文件,当访问相应组件的时候才会加载其相应的js文件,而不是在首页统一加载,这样就优化了首页渲染的时间,提高页面首次渲染时间; 路由 懒加载 具体的实现: var router = ...
  • Vue路由懒加载.md

    2021-01-14 10:08:31
    Vue路由懒加载.md
  • Vue路由懒加载报错问题解决

    千次阅读 2020-01-06 21:14:08
    使用Vue路由懒加载时报了以下错误: 经过百度发现,出现该问题的原因是: import 属于异步引用组件,需要特殊的babel-loader处理 解决办法: 安装babel用来编译import异步引用方法的模块 babel-plugin-syntax-...
  • vue路由懒加载之分包 分模块加载

    千次阅读 2020-12-21 15:29:32
    路由懒加载 分包 如下代码, Home无任何处理,直接引入 Ceshi 运用官方推荐的路由懒加载,优化首页加载的时间 About在路由懒加载的基础上,进行了分包,webpackChunkName: “name”,注意该注释,name一样的会被...
  • 为什么需要路由懒加载: 当打包构建应用时,JavaScript 包会变得非常大,影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了。 未使用...
  • 路由懒加载在访问页面的时候非常重要,能够提高首页加载速度,避免出现加载时候白页,如果没有懒加载,webpack打包后的文件会非常大。 import按需加载(常用) vue异步组件 webpack提供的require.ensure() 1、...
  • vue 路由懒加载的三种方式(本人常用ES6的import按需加载) const login = resolve => require(['@/pages/auth/login/login'], resolve)//vue异步组件按需加载方式 const login = () => import(/* ...
  • 1,为什么要是使用vue路由懒加载 vue这种单页面应用,如果我们不去做路由懒加载,打包之后的文件将会异常的大,就会造成进入首页时,需要加载的内容过多,时间过长,会出现长时间的白屏,不利于用户体验,运用懒加载...
  • vue路由懒加载链接过多导致本地开发热更新慢的解决解决办法 解决办法 通过vue-cli来构建的项目正常情况下一般的热更新会在1-10s之间,但是当项目中的路由链接数量达到一定数目的时候我发现热更新的速度大幅增加.甚至...
  • 路由懒加载的小技巧 一般来说当我们的项目越来越大的时候,我们打包的文件也越来越大。这时候我们的首屏加载就会很慢。因此我们会使用到路由懒加载机制来对我们的模块进行划分 export default new Router({ ...
  • 这里就想记录一下关于解决路由懒加载热更新慢的问题。 我们知道使用路由懒加载可以优化我们系统的加载速度,但是在使用懒加载的时候在我们开发环境下会导致Webpack热更新慢的问题,致使我们运行项目会很漫长。...
  • 最早的路由定义方式 import Vue from 'vue' import VueRouter from 'vue-router' import Home from '../views/Home.vue' import About from '../views/About.vue' import Login from '../views/Login.vue' Vue.use...
  • 第一步 npm install --save-dev @babel/plugin-syntax-dynamic-import 1 第二步 在项目中babel.config.js文件中,在文件中写入: “@babel/... '@vue/cli-plugin-babel/preset' ], plugins: [ [ "import", { l...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 39,528
精华内容 15,811
关键字:

vue路由懒加载

vue 订阅