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 组件的基本引用代码 ...
随机推荐
- selenium的错误截图
在自动化测试过程中,测试执行期间需要收集获取截图信息,一方面为了错误调试代码,一方面也为了和开发沟通, 获取当前的截图 save_screenshot是获取当前截图的方法,以百度首页为例,打开百度首页 ...
- 每天进步一点点------FIR(一)
在数字信号处理系统中,有限脉冲响应(finite impulse response,FIR)数字滤波器是一个非常重要的基本单元.近年来,由于FPGA具有高速度.高集成度和高可靠性的特点而得到快速发展. ...
- vue基础api
vue比jq好处 1jq 频繁操作dom 增加了性能消耗 vue 模拟dom 从内存中拿 2jq 数据没有统一管理 vue 统一管理数据 3vue 组件开发可以提取出公共的html或js mv*好 ...
- poj 3057(bfs+二分匹配)
题目链接:http://poj.org/problem?id=3057 题目大概意思是有一块区域组成的房间,房间的边缘有门和墙壁,'X'代表墙壁,'D'代表门,房间内部的' . '代表空区域,每个空区 ...
- 给大家推荐一些Java初学者所看的书籍
一.适合初学者的经典Java书籍; 比方说<Java核心技术卷>,<Effective Java中文版(第2版)> 二.Java开发者必读: <clean code> ...
- jquery点击添加样式,再次点击移除样式
$("#divSetting").on("click", function () { $(this).toggleClass("open") ...
- 普及C组第二题(8.2)
1340. [南海2009初中]jumpcow(牛跳) (Standard IO) 题目: John的奶牛们计划要跳到月亮上去.它们请魔法师配制了 P (1 <= P <=150,000) ...
- opencv:图像边缘发现
拉普拉斯算子 Mat dst; // ksize 3 ,必须是奇数,不同大小会有不同的效果 Laplacian(src, dst, -1, 3, 1.0, 0, BORDER_DEFAULT); im ...
- C4K Power supply failed?
故障log: %C4K_IOSMODPORTMAN-4-POWERSUPPLYBAD: Power supply 2 has failed or been turned off 在单机的情况下,我们可 ...
- AlertDialog 、SimpleDialog、 showModalBottomSheet、showToast 自定义 Dialog
// AlertDialog .SimpleDialog.showModalBottomSheet.showToast // 使用showToast安装插件 https://pub.dev/packa ...