用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. java 实现猜数字游戏 随机给定一个数字,猜大小直到正确

    package com.swift; import java.util.Random; import java.util.Scanner; public class GuessBigSmall { p ...

  2. mysql 删除 一天前 创建 的数据,计算时间差

    DELETE from table_name WHERE TIMESTAMPDIFF(SECOND ,CREATE_TIME,now() ) > 24*60*60 https://www.cnb ...

  3. 【函数应用】PHP中关于URL的函数处理

    一,函数介绍 1.解析HTTP头信息:get_header() array get_headers ( string 目标URL [, int $format = 0 [如果将可选的 format 参 ...

  4. 绘制字符串:imagestring()

    <?php //1. 绘制图像资源(创建一个画布) $image = imagecreatetruecolor(500, 300); //2. 先分配一个绿色 $green = imagecol ...

  5. python之返回状态commands模块

    需要得到命令执行的状态则需要判断$?的值, 在Python中有一个模块commands很容易做到以上的效果. commands.getstatusoutput(cmd)  返回一个元组(status, ...

  6. [译]Exactly once is NOT exactly the same

    近日学习Pulsar文档时,注意到Pulsar提到其提供的是effectively-once语义,而不是其它流计算引擎announce的exactly-once语义,并引用了Exactly once ...

  7. cf982d Shark

    ref #include <algorithm> #include <iostream> #include <cstdio> #include <map> ...

  8. cf984c Finite or not?

    一个十进制分数 \(p/q\) 在 \(b\) 进制下是有限小数的充要条件是 \(q\) 的所有质因子都是 \(b\) 的质因子. First, if \(p\) and \(q\) are not ...

  9. 转:vc与界面开发之间的文章

    [很好的一篇文章,很喜欢看同行的心路历程:http://www.vckbase.com/index.php/nv/444.html] 本屌丝在新春放假期间闲来无事,在各大编程论坛溜达了一圈.发现年前的 ...

  10. 使用android-junit-report.jar导出单元测试报告

    Android在使用脚本编译和测试时,使用默认的testrunner不会输出文件类型的单元测试报告,每次只能分析logcat的无法直观的看到单元测试结果和报告,这给编写自动化脚本带来了不少麻烦,虽然可 ...