前端设计

import和require的区别

2023-01-28

JavaScript支持本地js文件中的某个数据类型导入到另一个js文件中的操作


1、import是es6规范语法,require是AMD规范引入方式

2、import是在编译时被加载,所以放在文件开头。require在代码运行时被加载,所以require理论上可以运用在代码任何地方。import性能更好。

3、import引入的对象被修改时,源对象也会被修改,相当于浅拷贝,require引入的对象被修改时,源对象不会被修改,官网称值拷贝,我们可以理解为深拷贝。

4、import有利于tree-shaking(移除JavaScript上下文中未引用的代码),require对tree-shaking不友好。

import 虽然是 es6 中的语法,但就目前来说,所有的引擎都还没有实现import。2022-09-28查询

我们在 node 中使用 babel 支持ES6(在 node 当中,比如 node.js 代码,也不能直接使用 import 来导入,必须使用 babel 支持才能使用语法),实际上也是将 ES6 转码为 ES5 再执行,import 语法实际上会被转码为 require。这也是为什么在模块导出时使 module.exports,在引入模块时使用 import 仍然起效,因为本质上,import 会被转码为 require 去执行。


备注

tree-shaking

Tree shaking字面意就是“摇树”,通过摇树将树上枯黄的叶子摇落,在项目开发中,我们会按照模块划分的方式将代码组织起来,tree shaking的作用是把项目中没必要的代码全部抖落掉,消除被引用,删除没被调用的无用模块代码,该优化最终实现的是代码体积的减少,也属于项目性能优化的一部分。