require,import和import()函数的区别
参考网站:http://www.cnblogs.com/liujian9527/p/9869370.html
import
命令会被 JavaScript 引擎静态分析,先于模块内的其他模块执行(叫做”连接“更合适)。
import()
函数,完成动态加载。异步加载
require
是运行时加载模块,只有运行时才知道,同步加载
tips: require(),通过
Promise.resolve()也可实现一步加载
var foo = {then: (resolve, reject) => resolve('foo')
};
var resolved = Promise.resolve(foo);
相当于
var resolved = new Promise((resolve, reject) => {foo.then(resolve, reject)
});resolved.then((str) =>console.log(str);//foo
)
参考网站:https://www.cnblogs.com/yzq-fighting/p/7731545.html
路由组件按需加载的几种方法
在Vue项目中,一般使用vue-cli构建项目后,我们会在Router文件夹下面的index.js里面引入相关的路由组件,如:
import Hello from '@/components/Hello' import Boy from '@/components/Boy' import Girl from '@/components/Girl'
这样做的结果就是webpack在npm run build的时候会打包成一个整个的js文件,如果页面一多,会导致这个文件非常大,加载缓慢,为了解决这个问题,需要将他分成多个小文件,而且还要实现异步按需加载,即用到了再加载,而不用一股脑全部加载
1.webpack提供的require.ensure(),这样可以实现按需加载,并且你可以将多个相同类的组件打包成一个文件,只要给他们指定相同的chunkName即可,如示例中的demo将会打包成一个文件。
{path: '/promisedemo',name: 'PromiseDemo',component: r => require.ensure([], () => r(require('../components/PromiseDemo')), 'demo')},{path: '/hello',name: 'Hello',// component: Hellocomponent: r => require.ensure([], () => r(require('../components/Hello')), 'demo')}
2.Vue的异步组件技术,这种方法可以实现按需加载,并且一个组件会打包成一个js文件
{path: '/promisedemo',name: 'PromiseDemo',component: resolve => require(['../components/PromiseDemo'], resolve)}
3.es提案的import(),也是我推荐的方法
首先,可以将异步组件定义为返回一个 Promise 的工厂函数 (该函数返回的 Promise 应该 resolve 组件本身):
const Foo = () => Promise.resolve({ /* 组件定义对象 */ })
第二,在 Webpack 2 中,我们可以使用动态 import语法来定义代码分块点 (split point):
import('./Foo.vue') // 返回 Promise
注意:如果您使用的是 Babel,你将需要添加 syntax-dynamic-import
插件,才能使 Babel 可以正确地解析语法。
结合这两者,这就是如何定义一个能够被 Webpack 自动代码分割的异步组件。
const Foo = () => import('./Foo.vue')
这样做的结果是每个组件都会打包成一个js文件,有时候我们想把某个路由下的所有组件都打包在同个异步块 (chunk) 中。只需要使用 命名 chunk,一个特殊的注释语法来提供 chunk name
const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')
require,import和import()函数的区别相关推荐
- from...import 和 import 的区别
它们两个的简单区别: import 模块:导入一个模块:注:相当于导入的是一个文件夹,是个相对路径. from-import:导入了一个模块中的一个函数:注:相当于导入的是一个文件夹中的文件,是个绝对 ...
- Python中from import和import的区别?没有比这更好的回答了
ps:使用的python3.5版本. 例如datetime: from datetime import datetime print(datetime.now()) 就可以执行,但是用import就不 ...
- python __import__和import区别_Python中import 与__import__() 之间的区别比较
本篇文章给大家带来的内容是关于Python中import 与__import__() 之间的区别比较,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 首先来说一下两者的区别: impo ...
- Python中的from import和import的区别?没有比这回答的更好了
下面介绍下Python import与from import使用,具体内容如下所示: Python程序可以调用一组基本的函数(即内建函数),比如print().input()和len()等函数.Pyt ...
- iOS 中 #import同@class之间的区别
很多刚开始学习iOS开发的同学可能在看别人的代码的时候会发现有部分#import操作写在m文件中,而h文件仅仅使用@class进行声明,不禁纳闷起来,为什么不直接把#import放到h文件中呢? 这是 ...
- 前端面试之---link 引入css文件和@import引入css文件的区别
css引入方式link与import的区别 1.link属于html标签,而@import是css提供的,只能加载CSS 2.加载顺序,link在页面加载时被加载,@import在页面加载完之后再加载 ...
- from...import、import......as与from…import* 的含义与区别
一.import-as import:导入一个模块:注:相当于导入的是一个文件夹,是个相对路径 import A as B:给予工具库 A 一个简单的别称 B ,可以帮助记忆.例:import tor ...
- Python中from...import与import......as的区别
from...import 如 from A import b,相当于 import A b=A.b 再如: "from t2 import var1" 相当于: import t ...
- render函数和redirect函数的区别+反向解析
render函数和redirect函数的区别+反向解析 1.视图函数:一定是要包含两个对象的(render源码里面有HttpResponse对象) request对象:----->所有的请求 ...
- Python 学习之二: module, import 与 import as
2019独角兽企业重金招聘Python工程师标准>>> http://blog.csdn.net/fanshengchong/article/details/7039692 Pyth ...
最新文章
- Workbench Could not connect the SSH Tunnel Authentication error
- 使用Nagios监控网页
- 下一个十年的C位:物联网产业全景解析
- Spring JTA应用JOTM Atomikos III Atomikos
- Function实现ALV Table六:页眉页脚
- 64.多态性实现机制—静态分派与动态分派(方法解析、静态分派、动态分派、单分派和多分派)
- 看看差距--完备技术面试
- c# 获取html中指定标签信息,c# – 如何解析图像标签的HTML字符串以获取SRC信息?...
- redis 槽点重新分配 集群_弄懂一致性哈希后我打通了redis分区集群的原理
- iOS开发实战小知识点(四)
- 如何基于对话框的project基于改变BCG的
- Android Arcface人脸识别sdk使用工具类
- python发布代码图片_gitpython模块与代码发布项目流程图
- linux下一个网卡配置多个ip【虚拟ip】
- 开机bat脚本解决steam无法自动登陆
- 笑死人啦,史上最恶心的笑话
- 我的世界服务器玩家在线指令,我的世界指令大全:管理自己或者其他玩家及管理服务器指令...
- ES学习构建EKL海量日志分析平台
- 调试lan8720a遇到的奇葩问题,自动协商永远10M。
- 干货|如何轻松安装和永久激活photoshop cs6