还在用 require？是时候拥抱 import 了！

前端的小伙伴，一定对模块化不陌生。一个大型项目成千上万行代码堆在一起，修改一个 bug 都像大海捞针，想想都头皮发麻。这时候，就到了模块化大展手脚的时候了，它把代码分割成一个个独立的模块，让代码管理变得井井有条。本期我们就来聊聊 JavaScript 模块化的两位主角：import和require。

从混乱到清晰：模块化的作用

模块化就像把乐高积木分类放好，需要哪个就用哪个，不用担心弄乱其他积木。在 JavaScript 中，模块化也是类似的道理，把代码分成独立的模块，每个模块负责特定功能，然后像拼积木一样组合起来，构建出完整的应用。这样做的好处多多：代码可以重复使用，改 bug 更方便，团队协作也更顺畅。

require：Node.js 的规范

require是 CommonJS 规范的产物，稳定可靠，使用简单。require同步加载模块，也就是必须等模块加载完成才能继续执行后面的代码。

// 引入 Node.js 内置的文件系统模块

const fs = require('fs');

// 引入自定义模块

const myModule = require('./myModule.js');

console.log(myModule.sayHello()); // 输出：Hello!

require的同步加载方式在服务器端很实用，但在浏览器端就显得有点笨重了，因为它会阻塞页面渲染。

import：ES6 的新宠

import是 ES6 模块规范的代表，是现代浏览器和前端框架的新宠。import支持静态编译和动态加载，更加灵活高效。

// 从 Vue 库中引入 ref 函数

import { ref } from 'vue';

// 引入自定义组件

import MyComponent from './MyComponent.vue';

// 动态引入模块

import('./dynamicModule.js').then(module => {

console.log(module.sayHi()); // 输出：Hi!

});

import的静态编译能力可以让打包工具进行“摇树优化”（Tree Shaking），去除未使用的代码，减小打包体积，提升性能。动态加载则可以实现按需加载，让页面加载更快。

新老交替：未来属于谁？

require和import各有千秋。require胜在稳定可靠，import则胜在灵活高效。目前，import已经成为主流趋势，得到了现代浏览器和主流前端框架的广泛支持。当然，require在 Node.js 环境和一些老项目中仍然扮演着重要的角色。