const Login = resolve => require(['@/components/Login'], resolve)    //就不用import了Vue.use(Router)let router = new Router({// mode: 'history',routes: [ //根据这个遍历得到左边菜单{path: '/login',name: '登录',component: Login},

（组件、路由）懒加载

懒加载也叫延迟加载，即在需要的时候进行加载，随用随载

在单页应用中，如果没有应用懒加载，运用webpack打包后的文件将会异常的大，
造成进入首页时，需要加载的内容过多，延时过长，不利于用户体验，
运用懒加载可以将页面进行划分，按需加载页面，可以分担首页所承担的加载压力，减少加载用时。
一种代码分块的语法，使用 AMD 风格的 require

const Foo = resolve => require(['./Foo.vue'], resolve);
const router = new VueRouter({ routes: [ { path: '/foo', component: Foo } ] })

//router/index.js
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)const router = new Router({ routes: [ { mode: 'history', path: '/home', name: 'home', component: resolve => require([URL], resolve),//懒加载 children: [ { mode: 'history', path: '/home/:name', name: 'any', component: resolve => require(['@/components/any'], resolve),//懒加载 }, ] }, { mode: 'history', path: '/my', name: 'my', component: resolve => require(['@/components/my'], resolve),//懒加载, children: [ { mode: 'history', path: '/my/:name', name: 'any', component: resolve => require(['@/components/any'], resolve),//懒加载 }, ] }, { path: '/login', name: 'Login', component: resolve=>require(['@/components/login'],resolve) }, ] });

有一个问题：项目build以后，这个懒加载还有用吗？

转载于:https://www.cnblogs.com/yaowen/p/8939919.html

vue（组件、路由）懒加载相关推荐

vue 之路由懒加载
vue打包后的js文件越来越大,这会是影响加载时间的重要因数.当构建的项目比较大的时候,懒加载可以分割代码块,提高页面的初始加载效率.下面是几种常见vue路由懒加载的方法. 方法一 resolve 这 ...
vue实现路由懒加载，react实现路由懒加载
组件懒加载也叫按需加载: 当打包构建应用时,js 包会变得非常大,影响页面加载.如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了. 打包 bui ...
vue中路由懒加载浅析
http://www.cnblogs.com/zhanyishu/p/6587571.html 懒加载主要分为两步: 1.webpack配置使它支持懒加载. 2.router层面异步的方式加载组件. ...
Vue—核心概念—异步组件和路由懒加载
原文地址:Vue 异步组件&路由懒加载目录异步组件异步组件介绍异步组件声明高级异步组件路由懒加载路由懒加载介绍路由懒加载方法把组件按组分块异步组件异步组件介绍在开发大型 ...
Vue Router系列之路由懒加载
文章の目录一.具体需要 3 步: 1.安装 `@babel/plugin-syntax-dynamic-import` 包. 2.在 babel.config.js 配置文件中声明该插件. 3.将路 ...
vue路由懒加载--2种实现方式
(1)vue异步组件-路由懒加载 component:resolve=>(['需要加载的路由的地址',resolve]) (2)import 实现路由懒加载 [ 推荐 ] const Hell ...
Vue-Router + Webpack 路由懒加载实现
一.前言 https://segmentfault.com/a/1190000015904599 当打包构建应用时,Javascript 包会变得非常大,影响页面加载.如果我们能把不同路由对应的组件分 ...
性能优化---vue路由懒加载和异步组件
1.路由懒加载整个网页默认是刚打开就去加载所有页面,路由懒加载就是只加载你当前点击的那个模块. 实现方式有: 1.require:加载组件. component: resolve => req ...
VUE路由懒加载的方式——VUE异步组件
学了vue写项目这么久,忽然发现路由懒加载的写法,节省了加载所有路由的时间. 如图所示: 我们一开始用ES6的写法,在路由文件router/index.js中引入所有路由要用到的组件,然后在每个路由对 ...
前端学习（2742）：重读vue电商网站52之路由懒加载
当打包构建项目时,JavaScript 包会变得非常大,影响页面加载.如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了. 具体需要 3 步: 安 ...

vue（组件、路由）懒加载

（组件、路由）懒加载

有一个问题：项目build以后，这个懒加载还有用吗？

vue（组件、路由）懒加载相关推荐

最新文章

热门文章