JavaScript笔记之import和require的区别与对比

// Node.js 最早的模块系统（服务器端）
const fs = require('fs');
const _ = require('lodash');

// 浏览器/现代 Node.js 环境
import fs from 'fs';                    // 默认导入
import { readFile } from 'fs';          // 命名导入
import * as fsModule from 'fs';         // 全部导入

const moduleA = require('./a') // 执行到这里才加载

import moduleA from './a'

// 方式1：require.ensure (Webpack 特定)
const Home = resolve => {
  require.ensure(['./views/Home.vue'], () => {
    resolve(require('./views/Home.vue'));
  });
};

// 方式2：动态 require (Webpack)
const About = () => {
  return new Promise(resolve => {
    require(['./views/About.vue'], resolve);
  });
};

// 标准 ES6 动态导入
const Home = () => import('./views/Home.vue');

// 更复杂的懒加载配置
const UserProfile = () => ({
  component: import('./UserProfile.vue'),
  loading: LoadingComponent,
  delay: 200,
  timeout: 3000
});

// main.js
const utils = require('./utils')
utils.a()

function a() {}
function b() {}
const utils = { a, b }
utils.a()

// utils.js
export function a() {}
export function b() {}

// main.js
import { a } from './utils'
a()

function a() {}
// b 被删除（Tree Shaking）
a()

import('./About.vue')

// 主 bundle
function loadAbout() {
  return __loadChunk__('about').then(...)
}

// about.chunk.js（独立）
export default About

require('./About.vue')

(function(modules) {
  function __webpack_require__(id) {
    // 同步加载
  }
})(modules)

__webpack_require__.d(exports, {
  a: () => a
})

import { a } from './chunk.js'

import { debounce } from 'lodash-es'

const _ = require('lodash')

// ES6 模块（Node.js 13+，package.json 中 type: "module"）
import express from 'express';
import { createServer } from 'http';

// 或者 CommonJS（传统）
const express = require('express');
const http = require('http');

// Vue Router 懒加载（推荐）
const router = new VueRouter({
  routes: [
    {
      path: '/dashboard',
      component: () => import('./views/Dashboard.vue')  // ES6 import
    }
  ]
});

// React 懒加载
const Dashboard = React.lazy(() => import('./components/Dashboard'));

// 在 ES6 模块中导入 CommonJS 模块
import _ from 'lodash';  // lodash 是 CommonJS 模块

// 在 CommonJS 模块中导入 ES6 模块（Node.js）
const fs = require('fs');
const es6Module = await import('./es6-module.mjs');  // 需要异步

// Webpack 环境中可以混合
const oldModule = require('./old-module.js');        // CommonJS
const newModule = import('./new-module.js');         // ES6

// 测试示例：加载 10 个模块
const modules = ['module1', 'module2', 'module3'];

// require - 同步，阻塞执行
console.time('require');
modules.forEach(name => {
  const module = require(`./${name}.js`);
});
console.timeEnd('require');

// import - 异步，非阻塞
console.time('import');
const promises = modules.map(name => import(`./${name}.js`));
await Promise.all(promises);
console.timeEnd('import');

// 只导入需要的部分，打包时未使用的代码会被移除
import { Button, Input } from 'antd';    // Tree Shaking 生效
import 'antd/dist/antd.css';

// 动态导入也支持 Tree Shaking
const { Modal } = await import('antd');

import { a } from './utils'

// 整个模块都会被加载
const antd = require('antd');  // 整个 antd 包都会被包含
const Button = antd.Button;

const mod = require('./' + name)

// 1. 主应用使用静态导入
import Vue from 'vue';
import Router from 'vue-router';

// 2. 路由使用动态导入懒加载
const routes = [
  {
    path: '/',
    component: () => import('./views/Home.vue')
  },
  {
    path: '/about',
    component: () => import('./views/About.vue')
  }
];

// 3. 条件加载（按需加载）
if (user.needsAdminPanel) {
  const AdminPanel = await import('./admin/AdminPanel.vue');
}

// 4. 预加载（提高用户体验）
const preloadModules = [
  import('./views/Products.vue'),   // 预加载可能访问的页面
  import('./views/Contact.vue')
];