用vue.js写单页面应用时,会出现打包后的JavaScript包非常大,影响页面加载,我们可以利用路由的懒加载去优化这个问题,当我们用到某个路由后,才去加载对应的组件,这样就会更加高效,实现代码如下:

import Vue from 'vue'
import Router from 'vue-router' Vue.use(Router) export default new Router({
routes: [
{
path: '/',
component: resolve => require(['components/Hello.vue'], resolve)
},
{
path: '/about',
component: resolve => require(['components/About.vue'], resolve)
}
]
})

Vue.js笔记 — vue-router路由懒加载的更多相关文章

  1. 「Vue.js」Vue-Router + Webpack 路由懒加载实现

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

  2. vue项目性能优化(路由懒加载、gzip加速、cdn加速)

    前端工程性能优化一说意义深远悠长,本章主要介绍除了一些基础优化外如何实行路由懒加载.Gzip加速.CDN加速,让网页飞的快一些. 基础优化 老生常谈的一些: 不要在模板中写复杂的表达式 慎用watch ...

  3. Vue常规后台系统,路由懒加载实现基于菜单数据并解耦

    路由依赖菜单 场景:文件名与路由组件名完全一致(随便大小写均可) 菜单使用一套,路由又存在一套,这样就很不舒服,于是做了如下处理: 尝试不用懒加载发现有难度,使用懒加载就很轻松了 data.js ex ...

  4. 【巷子】---vue路由懒加载---【vue】

    一.懒加载 也叫延迟加载或者按需加载,即在需要的时候进行加载,   二.为什么要使用懒加载 像vue这种单页面应用,如果没有应用懒加载,运用webpack打包后的文件将会异常的大,造成进入首页时,需要 ...

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

    不多说上代码: <template> <div class="hello"> <h1>{{ msg }}</h1> <p> ...

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

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

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

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

  8. vue-router路由懒加载(解决vue项目首次加载慢)

    懒加载:----------------------------------------------------? 也叫延迟加载,即在需要的时候进行加载,随用随载. 为什么需要懒加载? 像vue这种单 ...

  9. vue进阶:vue-router之导航守卫、路由元信息、路由懒加载

    1.导航被触发 2.在失活的组件里调用离开守卫:beforeRouteLeave —— 组件内守卫(离开组件). 3.调用全局的beforeEach守卫 —— 全局守卫(进入组件). 4.在重用组件里 ...

  10. vue(18)路由懒加载

    什么是路由懒加载 官方的解释: 当打包构建应用时,JavaScript 包会变得非常大,影响页面加载. 如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更 ...

随机推荐

  1. Oracle Hint 之 Append

    1 描述 所谓直接路径操作,就是绕过buffer cache,直接将数据插入到表所在的数据文件中: 假如有表A,要将A中的数据插入到表B,在普通的间接插入下,先将A中的数据块传进buffer cach ...

  2. 记录一下CSS outline-width 属性

    outline(轮廓)是绘制于元素周围的一条线,位于边框边缘的外围. outline-width指定轮廓的宽度. 注意: 请始终在outline-width属性之前声明outline-style属性. ...

  3. split 分割压缩文件

    1.普通tar压缩命令 tar -zcvf cm-11.tar.gz cm-11 //将cm-11文件夹压缩成cm-11.tar.gz 2.压缩后的文件太大,需要将cm-11.tar.gz分割成N个指 ...

  4. PHP数据库扩展 - PDO操作

    PDO操作 PDO操作 描述:odp是php对数据库操作统一化的操作 语法:$pdo = new PDO("DB名:host=主机名;dbname=DB名","DB账号& ...

  5. Zabbix监控告警Lack of free swap space on Zabbix server解决办法

    报错详情如下: 是因为Zabbix监控没有考虑虚拟主机的交换空间情况 解决办法修改配置 修改表达式内容:{Template OS Linux:system.swap.size[,pfree].last ...

  6. 第三章JavaScript 内置对象

    1 Number 1.1 属性 MAX_VALUE JS可以表示的最大的数字 MIN_VALUE JS可以表示的最小的数字 1.2 方法 toFixed(length) 指定保留长度的小数 toExp ...

  7. MySQL批量插入大量数据方法

    在MySQL数据库中,如果要插入上百万级的记录,用普通的insert into来操作非常不现实,速度慢人力成本高,推荐使用Load Data或存储过程来导入数据,我总结了一些方法分享如下,主要基于My ...

  8. STM32串口——中断方式的一般配置方法

    #include "stm32f10x.h" /************************************************ 该程序讲解串口程序的一般配置方法: ...

  9. V4L2学习(二)结构介绍

    v4l2_device v4l2_device在v4l2框架中充当所有v4l2_subdev的父设备,管理着注册在其下的子设备.以下是v4l2_device结构体原型(去掉了无关的成员): struc ...

  10. Redis实现之数据库(一)

    服务器中的数据库 Redis服务器将所有数据库都保存在服务器状态redis.h/redisServer结构体的db数组中,db数组的每个项都是一个redis.h/redisDb结构体,每个redisD ...