JavaScript 中 Require 与 Import 的核心区别详解

require 与 import 的对比差异

JavaScript 中，require 为 Node.js 内置方法，import 则是 ES6 标准关键字，二者均用于模块导入。

require 执行同步加载，会阻塞脚本后续代码；import 执行异步加载，不阻塞脚本执行。

核心区别在于：require 仅能加载整个模块，而 import 支持加载按需拆分导出的模块。

拆分导出(individual export) 支持 value, funcition, object

示例：若存在模块 myModule，通过 require 导入整个模块的方式如下：

const myModule = require('myModule');

若需调用其中的方法或值，必须使用 . 符号进行访问：

const myFunction = require('myModule').myFunction;

考察 import 用法，若需导入整个模块：

import * as myModule from 'myModule';

若仅需导入指定内容：

import {myFunction} from 'myModule';

相比之下，import 更为灵活，作为 require 后推出的 ES 关键字，理论上将全面取代 require。但在 Node.js 环境中仍保留对 require 的支持，用户可根据需求选择语法。

import() 动态导入

如前所述，其最大优势在于支持按需导入而非全量加载。此举在减少代码量的同时提升了可读性，具体示例如下：

// moduleA.js
export const x = 1;
export const y = 2;
// moduleB.js
import { x, y } from './moduleA';
console.log(x); // outputs 1
console.log(y); // outputs 2

Webpack 内置缓存机制，可缓存通过 import 关键字加载的模块。Rollup 等其他模块工具亦具备类似功能。

require() 机制

在 Node.js 环境中，require() 作为内置方法，负责读取并执行 JS 文件，最终返回导出的对象：

// app.js
const _ = require('lodash');
const arr = [1, 2, 3];
const sum = _.sum(arr);
console.log(sum); // outputs 6

需注意⚠️的是，require() 属于同步代码，在模块加载完成前会阻塞代码执行。

此外，require() 利用缓存机制确保模块仅加载一次。即使多个文件引用该模块，Node.js 也会检查是否已加载并缓存，若已存在则直接返回缓存内容。

英文原文链接(作者: Alex Ivanovs)

以上就是JS中Require与Import 区别对比分析的详细内容，更多关于JS Require对比Import区别的资料请关注本站其它相关文章！