component:(resolve) => require
resolve => require(['../pages/home.vue'], resolve)这种写法是异步模块获取,打包的时候每次访问这个路由的时候会单调单个文件,按需加载,不过这种写法已经过时了。
懒加载
router/index.js
1 import Vue from 'vue'
2 import Router from 'vue-router'
3 Vue.use(Router)
4
5 export default new Router({
6 mode:'history',
7 routes: [
8 {
9 path:'/',
10 redirect:'/index'
11 },
12 {
13 path: '/about',
14 name: 'About',
15 component:resolve => require(['@/pages/About'],resolve)
16 },
17 {
18 path: '/index',
19 name: 'Index',
20 component:resolve => require(['@/pages/Index'],resolve)
21 },
22 {
23 path: '/product',
24 name: 'Product',
25 component:resolve => require(['@/pages/Product'],resolve)
26 }
27 ]
28 })
还有种写法就是用import,这种是把component打包到一个文件里面,初次就读取全部;
非懒加载
router/index.js
1 import Vue from 'vue'
2 import Router from 'vue-router'
3 import About from '@/pages/About'
4 import Index from '@/pages/Index'
5 import Product from '@/pages/Product'
6 Vue.use(Router)
7
8 export default new Router({
9 mode:'history',
10 routes: [
11 {
12 path:'/',
13 redirect:'/index'
14 },
15 {
16 path: '/about',
17 name: 'About',
18 component:About
19 },
20 {
21 path: '/index',
22 name: 'Index',
23 component:Index
24 },
25 {
26 path: '/product',
27 name: 'Product',
28 component:Product
29 }
30 ]
31 })
如果用import引入的话,当项目打包时路由里的所有component都会打包在一个js中,造成进入首页时,需要加载的内容过多,时间相对比较长。
当你用require这种方式引入的时候,会将你的component分别打包成不同的js,加载的时候也是按需加载,只用访问这个路由网址时才会加载这个js。
你可以打包的时候看看目录结构就明白了。
推荐使用 import('../home.vue'),详见官方文档 路由懒加载:
结合 Vue 的异步组件和 Webpack 的代码分割功能,轻松实现路由组件的懒加载。
首先,可以将异步组件定义为返回一个 Promise 的工厂函数 (该函数返回的 Promise 应该 resolve 组件本身):
1 const Foo = () => Promise.resolve({ /* 组件定义对象 */ })
第二,在 Webpack 2 中,我们可以使用动态 import语法来定义代码分块点 (split point):
1 import('./Foo.vue') // 返回 Promise
结合这两者,这就是如何定义一个能够被 Webpack 自动代码分割的异步组件。
1 const Foo = () => import('./Foo.vue')
在路由配置中什么都不需要改变,只需要像往常一样使用 Foo
:
1 const router = new VueRouter({
2 routes: [
3 { path: '/foo', component: Foo }
4 ]
5 })
把组件按组分块
有时候我们想把某个路由下的所有组件都打包在同个异步块 (chunk) 中。只需要使用 命名 chunk,一个特殊的注释语法来提供 chunk name (需要 Webpack > 2.4)。
1 const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')
2 const Bar = () => import(/* webpackChunkName: "group-foo" */ './Bar.vue')
3 const Baz = () => import(/* webpackChunkName: "group-foo" */ './Baz.vue')
Webpack 会将任何一个异步模块与相同的块名称组合到相同的异步块中。
component:(resolve) => require的更多相关文章
- component: resolve => require(['../pages/home.vue'], resolve)
component: resolve => require(['../pages/home.vue'], resolve) vue 路由的懒加载 import Vue from 'vue' im ...
- component: resolve => require(['../pages/home.vue'], resolve)-装载
import Vue from 'vue'import VueRouter from 'vue-router'// "@"相当于".."import Detai ...
- Cannot resolve symbol ‘Component’ & Cannot resolve symbol ‘PropTypes’
import React, { Component, PropTypes } from 'react' 报错:Cannot resolve symbol 'Component' Cannot reso ...
- Error:ivalue require as left operant of assignment
Error:ivalue require as left operant of assignment 解答:该错误的意思是左操作数必须为左值,这个发生错误的原因在于赋值符号的左边不能是已确定的值,如: ...
- Laravel5.6安裝:Warning: require(../vendor/autoload.php): failed to open stream: No such file or directory
在phpstudy下使用composer+laravel安装器的方式安装了Laravel,但是访问的时候报错: Warning: require(D:\phpstudy\WWW\public\mybl ...
- Laravel访问出错错误信息:`Warning: require(/vendor/autoload.php): failed to open stream: No such file or dire
错误信息:`Warning: require(/http/www.mywakavLee.cn/bootstrap/../vendor/autoload.php): failed to open str ...
- JS模块化工具require.js教程(一):初识require.js
随着网站功能逐渐丰富,网页中的js也变得越来越复杂和臃肿,原有通过script标签来导入一个个的js文件这种方式已经不能满足现在互联网开发模式,我们需要团队协作.模块复用.单元测试等等一系列复杂的需求 ...
- perl学习之:use & require
相同: 都可以用来引用module(.PM). 不同: 1) 区别在于USE是在当前默认的@INC里面去寻找,一旦模块不在@INC中的话,用USE是不可以引入的,但是require可以指定路径: 2) ...
- 二、Vue组件(component):组件的相互引用、通过props实现父子组件互传值
一.组件各部分说明及互相引用 1.一个vue组件由三个部分组成 Template 只能存在一个根元素 2.Script 3.Style scoped:样式只在当前组件内生效 1.1 组件的基本引用代码 ...
随机推荐
- audio mixer
https://blog.csdn.net/jeffasd/article/details/77155187 https://blog.csdn.net/jeffasd/article/details ...
- C#常用的form窗体属性(最大化、最小化、窗体居中)
一.窗体居中 //窗体居中 this.StartPosition = System.Windows.Forms.FormStartPosition.CenterScreen; 二.去掉最小化.最大化 ...
- 2020最新版idea激活教程
windows破解教程 首先下载jar包:(云盘链接发不上去,大家关注gzh"灰太狼学爪哇"回复idea获取)将其放到合适的文件夹(首选IDEA的同级目录)进行管理: 进入C盘 - ...
- 「CSP-S模拟赛」2019第三场
目录 T1 「POI2007」山峰和山谷 Ridges and Valleys 题目 考场思路(几近正解) 正解 T2 「JOI 2013 Final」 现代豪宅 题目 考场思路(正解) T3 「SC ...
- SpringMVC--使用hibernate validator数据校验
JSR 303 Spring3开始支持JSR 303 验证框架,JSR303是Java为Bean数据合法性校验所提供的标准框架.JSR 303 支持XML和注解风格的验证,通过在Bean属性上标注类似 ...
- VS2015生成代码图
熟悉代码调用流程,可以在调试结束前显示代码图,操作位置: 比如开源的caffe_ocr的代码图:
- 初探日志分析常用的linux命令
了解linux常用命令,有助于提升我们的生产力,提升工作效率,更快速地定位问题,当然也是为了更好地解决问题.这两天,趁着在家办公的时间,我把linux系统中常用的命令整理了一下,主要涉及到查找.查看, ...
- Acwing 蛇形矩阵
Acwing 蛇形矩阵 package javaqq; import java.util.Scanner; public class 蛇形 { public static void main(Stri ...
- DIV 设置垂直居中
要说面试官经常问的问题中“如何将一个块元素水平垂直居中”就算一个. 之前的面试中也有中招,现在总结一下. 1.CSS垂直水平居中 要让DIV水平和垂直居中,必需知道该DIV得宽度和高度,然后设置位置为 ...
- 读书笔记, Python - python-tricks-buffet-awesome-features
To be a Pythonista 1. assert syntax: assert expression1 [",", expression2] 大致相当于 if __debu ...