这里require和import的区别不太明白

Question

老师说，import是在预编译阶段就会加载，require在预编译阶段不会加载。那我想问下预编译是哪个阶段啊，老师的演示代码是

	if(mock){
		require()
	}

老师的意思是说webpack打包的阶段，如果使用import的方式的话，就没法用if和else进行选择性的加载吗？

Answer 1

cyper 2020-07-19 00:55:58

我查了一下vue-router中用的是import函数，  和文件顶部的import语句是不一样的， import函数也是动态加载文件， 并且是在运行时，  他是javascript新增加的函数， chrome浏览器已经支持了。

import('xxxx.js').then(res=> {console.log(res)})

和require不同， require是node端用的（webpack用的）。 他是同步的（语句会阻塞）， import(..)是浏览器直接支持的， 他是异步的，返回Promise。

• cyper #1

  官方文档， 除了IE， 其他浏览器都支持使用import动态导入模块了： https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#Dynamic_Imports
  
  这个就是你提到的vue-router中动态导入component使用的函数

Answer 2

河畔一角 2020-02-23 20:49:01

import语法是不能写在代码快中跟if else结合使用的，只能在文件顶部用来导入模块

Answer 3

河畔一角 2020-02-23 20:47:31

import是预加载，也就是打包的时候把文件加载进去，不管你有没有用到，这实际上是模块加载，而require实际上是后置按需加载，在js执行到的时候才会加载。

• 提问者 慕莱坞0998854 #1

  老师，我还是不太清楚这个具体的流程，但是我想起一个"类似"的概念，vue-router在配置router.js的时候，可以使用按需加载的功能，就是（） => import(/* webpackChunkName: "group-foo" */ './Foo.vue')这样的形式，其实foo组件代码已经打包到项目中了，只有用户浏览的网页需要用到Foo组件的时候，才会加载组件的代码。所以require也是这样的吗？不论这里的mock是否为true,mock
  js的代码都已经打包到项目中，只是一句mock的值来决定是否加载了？还是说假如mock的值为false,那么webpack根本就不会把mockjs的代码打包进项目？

• cyper 回复 提问者 慕莱坞0998854 #2

  vue-router  import函数的问题见上面的回答。
  
  require应该是全量打包， 按需加载。   我记得图片img src可以使用require动态引入不同的文件路径（肯定是要全量打包的）。