一、懒加载

也叫延迟加载或者按需加载,即在需要的时候进行加载,

 

二、为什么要使用懒加载

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

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

三、非懒加载的路由配置项

四、vue异步组件实现路由懒加载

  使用vue的异步组件,可以实现路由的懒加载

  {

     path: '/home',

     name: 'home',

     component: resolve => require(['../components/home'], resolve)

   }

五、es提出的import(推荐使用这种方式)

const homeFn = () => import('../components/home/home')

const movieFn = () => import('../components/movie/movie')

export default new Router({

   routes: [

     {

      path: '/home',

        name: 'home',

      component: homeFn

     },

     {

      path: '/movie',

      name: 'movie',

       component: movieFn

      }

] })

六、chunkFilename

chunkFilename:chunkname就是未被列在entry中,但有些场景需要被打包出来的文件命名配置。比如按需加载(异步)模块的时候,这样的文件是没有被列在entry中的使用CommonJS的方式异步加载模块

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

【巷子】---vue路由懒加载---【vue】的更多相关文章

  1. vue路由懒加载及组件懒加载

    一.为什么要使用路由懒加载 为给客户更好的客户体验,首屏组件加载速度更快一些,解决白屏问题. 二.定义 懒加载简单来说就是延迟加载或按需加载,即在需要的时候的时候进行加载. 三.使用 常用的懒加载方式 ...

  2. Vue 路由懒加载, VueRouter一步完成Vue的路由懒加载 一行代码搞定懒加载

    Vue Router路由配置中的component里面配置即可 1 // 路由懒加载的方式加载组件 2 3 component: () => import('@/views/Detail'), ...

  3. vue 路由懒加载 resolve vue-router配置

    使用方法 component:resolve => require(['@/pages/About'],resolve) //"@"相当于".." 懒加载 ...

  4. 路由懒加载---Vue Router

    一.什么是懒加载? 懒加载也就是延迟加载或者按需加载,即在需要的时候进行加载. 二.为什么在Vue路由中使用懒加载? 像vue这种单页面应用,如果没有应用懒加载,运用webpack打包后的文件将会异常 ...

  5. vue 路由懒加载 使用,优化对比

    vue这种单页面应用,如果没有应用懒加载,运用webpack打包后的文件将会异常的大,造成进入首页时,需要加载的内容过多,时间过长,会出啊先长时间的白屏,即使做了loading也是不利于用户体验,而运 ...

  6. vue路由懒加载

    大项目中,为了提高初始化页面的效率,路由一般使用懒加载模式,一共三种实现方式.(1)第一种写法: component: (resolve) => require(['@/components/O ...

  7. vue路由懒加载,babel-loader无法处理/使用 import

    使用vue-router懒加载,代码如下: 但是npm run dev 的时候 babel-loader报错如下: 查阅各种资料终于解决. 问题原因: 这种情况下的 import 属于异步引用组件,需 ...

  8. VUE图片懒加载-vue lazyload插件的简单使用

    序:vue项目时候,我们要对图片进行懒加载处理,这个开发项目中就不需要自己去写了,因为比较方便使用vue lazyload进行处理,高效率开发 一. vue lazyload插件: 插件地址:http ...

  9. VUE图片懒加载-vue lazyload插件的简单上手使用(优化版本)

    在用VUE做项目开发的过程中,首页用到了懒加载的方法,查找了一些方法,觉得官网写得太复杂,有一篇博客不错(https://www.cnblogs.com/xyyt/p/7650539.html),但是 ...

随机推荐

  1. Maven中央仓库——你可能不知道的细节

    地址 —— 目前来说,http://repo1.maven.org/maven2/是真正的Maven中央仓库的地址,该地址内置在Maven的源码中,其它地址包括著名的ibiblio.org,都是镜像. ...

  2. C 字符串操作函数

    针对C风格的字符串(char p[n];): 长度(strlen).追加(strcat, strncat).比较(strcmp, strncmp).查找(strchr, strstr)等. --带n的 ...

  3. C++ 数据抽象

    C++ 数据抽象数据抽象是指,只向外界提供关键信息,并隐藏其后台的实现细节,即只表现必要的信息而不呈现细节. 数据抽象是一种依赖于接口和实现分离的编程(设计)技术. 让我们举一个现实生活中的真实例子, ...

  4. linux -- Ubuntu开启root账户,并切换到root用户登陆

    启用root账户 ubuntu 的root账户具有最高的系统权限,它类似于windows系统中的管理员账号,但是比windows系统中管理员账号的权限更高,一般都情况下不要使用root账户,但是有的时 ...

  5. ubuntu下android环境的搭建

    ---------省略1000字 https://dl-ssl.google.com/android/eclipse/  如果该方法被墙,直接下载最新ADT,在我的博客里有介绍,或者我已经上传百度网盘 ...

  6. Supervision 行为模式

    官方链接:http://erlang.org/doc/man/supervisor.html http://erlang.org/doc/design_principles/sup_princ.htm ...

  7. c# 异步编程demo (async await)

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.W ...

  8. 新兵训练营课程——环境与工具Java[转]

    原文地址:http://weibo.com/p/1001643874239169320051 程序员在开发过程中会用到很多工具来提升开发和协作效率,这次介绍的是目前微博平台在开发过程中用到的一些工具, ...

  9. Centos6.8搭建Git服务(git版本可选)

    搭建Git服务器需要准备一台运行Linux的机器,本文以Centos6.8纯净版系统为例搭建自己的Git服务. 准备工作:以root用户登陆自己的Linux服务器. 第一步安装依赖库 [root@lo ...

  10. linux 删除文件夹及其内容,显示文件路径

    比如要删除work文件夹包括里面的内容,则:rm -r /home/ftk/apache-tomcat-5.5.20/work,不管它是文件还是目录都删掉了 知道文件名 要查询文件大概地址用~cd ~ ...