vue2实现路由懒加载

一、什么是懒加载

顾名思义,懒加载就是随用随加载,什么时候需要就什么时候加载。

二、为什么需要懒加载

在单页应用中,如果没有使用懒加载,webpack打包后的文件会很大,这时进入首页时的加载时间会很长,不利于良好的用户体验,而运用懒加载则可以将页面进行划分,需要的时候加载页面,可以有效的分担首页所承担的加载压力,减少首页加载所用的时间。

三、路由中懒加载机制的体现

const OldPhone = resolve => require(["@/pages/mine/OldPhoneEnsure"], resolve);

  export default new Router({

    routes: [

        { 

path: "/oldphone",
                              name: "oldphone",
                              component: OldPhone,
                              meta: {
                                          title: "确认手机号",
                                          keepAlive: false,
                                          requireAuth: true
                                       }

        },

    ]

})

原文地址:https://www.cnblogs.com/kadima-zy/p/router.html

时间: 2024-08-30 17:26:11

vue2实现路由懒加载的相关文章

vue2.x 路由懒加载 优化打包体积

当打包构建应用时,Javascript 包会变得非常大,影响页面加载.如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了. 结合 Vue 的异步组件和 Webpack 的代码分割功能,轻松实现路由组件的懒加载. 首先,可以将异步组件定义为返回一个 Promise 的工厂函数 (该函数返回的 Promise 应该 resolve 组件本身): const Foo = () => Promise.resolve({ /* 组件定义对象 */ })

vue 路由懒加载

题外: 我司目前的后台管理网站依旧是 jq + xxUI 构成的 ,早就想把 丫儿 个换成 vue了, 苦于整个组几乎一致处于一个忙碌的状态,没有时间来重构. 然鹅,昨天今天组长找到我说要用 vue 搞起来,这个问题不大,毕竟之前用他完成了几个项目,颇有收获,教训满满. 看着 左侧 冗长菜单 item ,不禁陷入了沉思. 当打包构建应用时,Javascript 包会变得非常大,首次加载即便使用了 各种 LOADING ,各种 动画,肯定体验贼差, 如果我们能把不同路由对应的组件分割成不同的代码块

The way of Webpack learning (III.) -- codeSplitting & lazyLoding(代码分割和路由懒加载)

代码分割:对于一个大型的web项目来说,如果为了减少http请求,只打包出一个bundle.js文件,那么只要我们的需求修改了一点点,整个bundle.js都需要重新加载,得不偿失.所以我们不妨把代码分割成一块一块的,按需加载,而且还能利用浏览器缓存机制,如果文件没有修改,直接从缓存读取.也就是说,代码分割就是把代码切成很多块(chunk). 懒加载:按需加载,页面需要什么文件我才去加载什么文件.我现在只知道应用在路由懒加载中,就是根据路由,按需加载不同的文件. 在上一章节提到使用Commonc

【凡尘】---vue路由懒加载---【vue】

一.懒加载 也叫延迟加载或者按需加载,即在需要的时候进行加载,   二.为什么要使用懒加载 像vue这种单页面应用,如果没有应用懒加载,运用webpack打包后的文件将会异常的大,造成进入首页时,需要加载的内容过多,时间过长,会出啊先长时间的白屏,即使做了loading也是不利于用户体验,而运用懒加载则可以将页面进行划分,需要的时候加载页面,可以有效的分担首页所承担的加载压力,减少首页加载用时 简单的说就是:进入首页不用一次加载过多资源造成用时过长 三.非懒加载的路由配置项 四.vue异步组件实

vue+element ui项目总结点(一)select、Cascader级联选择器、encodeURI、decodeURI转码解码、一级mockjs用法、路由懒加载三种方式

不多说上代码: <template> <div class="hello"> <h1>{{ msg }}</h1> <p>Element UI简单Cascader级联选择器使用</p> <el-cascader :options='options' v-model="selectedOptions" @change="handleChange"> </el-

React 路由懒加载的几种实现方案

这篇文字简单的介绍了React在路由懒加载方面的几种实现方案. 传统的两种方式 import() 符合ECMAScript提议的import()语法,该提案与普通 import 语句或 require 函数的类似,但返回一个 Promise 对象.这意味着模块时异步加载的 webpack v2+ 使用 使用方式 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 function component() {  return import( /* webpackChu

vue-cli3+typescript+路由懒加载报错问题

vue-cli3的版本是3.4.1 出现的情况是网页显示正常,但是终端一直提示找不到模块: 如果去掉路由懒加载的方式,就没有报错: 原因是以前我们习惯直接写文件名而不加后缀, 现在使用ts时就需要写vue文件后缀了,现在加上.vue文件后缀就没有报错了: 原文地址:https://www.cnblogs.com/unclefang/p/10451845.html

前端性能优化方案-路由懒加载实现

组件懒加载也叫按需加载: 当打包构建应用时,JavaScript 包会变得非常大,影响页面加载.如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了. 打包 build 后的 dist 中 js 包文件太大,影响页面加载速度,使用 vue 的异步组件和 webpack 的代码分割功能,实现路由组件的懒加载: 下面通过 vue 的异步加载和 webpack 来实现组件懒加载: 先看例子不使用路由懒加载的情况: import Vue from 'v

前端项目首屏加速 gzip打包 路由懒加载 cdn资源优化

目前主流的Vue, React 等单页项目中 build 把所有开发遇到的代码打包在一起形成一个js和一个css, 服务器请求, 然后加载js, css 等依赖进行渲染. 因此会经常遇到,个人写的项目,打开十分缓慢,需要加载很长时间才能加载完毕. 就算不是白屏,做了loading处理 但还是会很影响体验 排除服务器带宽实在太低, 服务器压力实在太大, 文件的大小是速度的第一影响. gzip打包 gzip打包很好理解. 请求的东西可以通过压缩的方式, 到了客户端再解压 采用nginx即可 配置方案