// Node.js 最早的模塊系統(tǒng)（服務(wù)器端）
const fs = require('fs');
const _ = require('lodash');

// 瀏覽器/現(xiàn)代 Node.js 環(huán)境
import fs from 'fs';                    // 默認(rèn)導(dǎo)入
import { readFile } from 'fs';          // 命名導(dǎo)入
import * as fsModule from 'fs';         // 全部導(dǎo)入

const moduleA = require('./a') // 執(zhí)行到這里才加載

import moduleA from './a'

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

// 方式2：動(dòng)態(tài) require (Webpack)
const About = () => {
  return new Promise(resolve => {
    require(['./views/About.vue'], resolve);
  });
};

// 標(biāo)準(zhǔn) ES6 動(dòng)態(tài)導(dǎo)入
const Home = () => import('./views/Home.vue');

// 更復(fù)雜的懶加載配置
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（獨(dú)立）
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（傳統(tǒng)）
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 模塊中導(dǎo)入 CommonJS 模塊
import _ from 'lodash';  // lodash 是 CommonJS 模塊

// 在 CommonJS 模塊中導(dǎo)入 ES6 模塊（Node.js）
const fs = require('fs');
const es6Module = await import('./es6-module.mjs');  // 需要異步

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

// 測(cè)試示例：加載 10 個(gè)模塊
const modules = ['module1', 'module2', 'module3'];

// require - 同步，阻塞執(zhí)行
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');

// 只導(dǎo)入需要的部分，打包時(shí)未使用的代碼會(huì)被移除
import { Button, Input } from 'antd';    // Tree Shaking 生效
import 'antd/dist/antd.css';

// 動(dòng)態(tài)導(dǎo)入也支持 Tree Shaking
const { Modal } = await import('antd');

import { a } from './utils'

// 整個(gè)模塊都會(huì)被加載
const antd = require('antd');  // 整個(gè) antd 包都會(huì)被包含
const Button = antd.Button;

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

// 1. 主應(yīng)用使用靜態(tài)導(dǎo)入
import Vue from 'vue';
import Router from 'vue-router';

// 2. 路由使用動(dòng)態(tài)導(dǎo)入懶加載
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. 預(yù)加載（提高用戶體驗(yàn)）
const preloadModules = [
  import('./views/Products.vue'),   // 預(yù)加載可能訪問(wèn)的頁(yè)面
  import('./views/Contact.vue')
];