以下代码就是通过ai生成的全部过程

商业级延迟加载 JavaScript 模块方案

我将提供一个可直接用于商业项目的完整方案，包含所有必要的优化和安全措施。这个方案解决了之前的所有问题，并增加了生产环境所需的功能。

完整解决方案

文件结构

project/
├── index.html
├── lazy-loader.js
└── modules/
    ├── module-a.js
    └── module-b.js

1. HTML 文件 (index.html)

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商业级延迟加载JS方案 | 企业解决方案</title>
    <style>
        :root {
            --primary: #4285f4;
            --success: #34a853;
            --warning: #fbbc05;
            --danger: #ea4335;
            --text: #202124;
            --light-bg: #f8f9fa;
            --border: #dadce0;
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            font-family: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
            line-height: 1.6;
            max-width: 1200px;
            margin: 0 auto;
            padding: 2rem 1rem;
            color: var(--text);
            background-color: #f5f7fa;
        }

        header {
            text-align: center;
            margin-bottom: 2.5rem;
            padding-bottom: 1.5rem;
            border-bottom: 1px solid var(--border);
        }

        h1 {
            font-size: 2.2rem;
            margin-bottom: 0.5rem;
            color: var(--primary);
        }

        .subtitle {
            color: #5f6368;
            font-size: 1.1rem;
            max-width: 700px;
            margin: 0 auto;
        }

        .modules-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            gap: 1.5rem;
            margin-top: 2rem;
        }

        .module-card {
            background: white;
            border-radius: 12px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
            overflow: hidden;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            border: 1px solid var(--border);
        }

        .module-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
        }

        .card-header {
            padding: 1.5rem;
            background: var(--light-bg);
            border-bottom: 1px solid var(--border);
        }

        .card-title {
            font-size: 1.3rem;
            margin-bottom: 0.5rem;
            color: var(--primary);
            display: flex;
            align-items: center;
            gap: 0.8rem;
        }

        .card-icon {
            width: 36px;
            height: 36px;
            background: var(--primary);
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
        }

        .card-body {
            padding: 1.5rem;
        }

        .card-description {
            color: #5f6368;
            margin-bottom: 1.5rem;
            line-height: 1.7;
        }

        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 0.8rem 1.8rem;
            background: var(--primary);
            color: white;
            border: none;
            border-radius: 8px;
            font-size: 1rem;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.25s ease;
            gap: 0.5rem;
            width: 100%;
            text-align: center;
        }

        .btn:hover {
            background: #3367d6;
            transform: translateY(-2px);
        }

        .btn:disabled {
            background: #e0e0e0;
            color: #9e9e9e;
            cursor: not-allowed;
            transform: none;
        }

        .btn-success {
            background: var(--success);
        }

        .btn-success:hover {
            background: #2d9249;
        }

        .status-container {
            margin-top: 1.2rem;
            padding: 1.2rem;
            border-radius: 8px;
            background: white;
            border-left: 4px solid var(--primary);
            font-size: 0.95rem;
            min-height: 60px;
        }

        .status-container.error {
            border-left-color: var(--danger);
            background: #fef6f6;
            color: var(--danger);
        }

        .status-container.success {
            border-left-color: var(--success);
            background: #f6fef9;
        }

        .spinner {
            display: inline-block;
            width: 18px;
            height: 18px;
            border: 3px solid rgba(255, 255, 255, 0.3);
            border-radius: 50%;
            border-top-color: white;
            animation: spin 1s ease-in-out infinite;
        }

        .badge {
            display: inline-block;
            padding: 0.3rem 0.6rem;
            border-radius: 4px;
            font-size: 0.8rem;
            font-weight: 500;
        }

        .badge-info {
            background: #e8f0fe;
            color: var(--primary);
        }

        .badge-warning {
            background: #fef7e0;
            color: var(--warning);
        }

        @keyframes spin {
            to { transform: rotate(360deg); }
        }

        footer {
            text-align: center;
            margin-top: 3rem;
            padding-top: 2rem;
            color: #5f6368;
            font-size: 0.9rem;
            border-top: 1px solid var(--border);
        }

        @media (max-width: 768px) {
            .modules-container {
                grid-template-columns: 1fr;
            }

            h1 {
                font-size: 1.8rem;
            }
        }
    </style>
</head>
<body>
    <header>
        <h1>商业级 JavaScript 延迟加载方案</h1>
        <p class="subtitle">按需加载资源，提升应用性能，优化用户体验 - 企业级解决方案</p>
    </header>

    <main>
        <div class="modules-container">
            <!-- 模块A -->
            <div class="module-card" data-module="moduleA">
                <div class="card-header">
                    <h2 class="card-title">
                        <span class="card-icon">A</span>
                        数据分析模块
                    </h2>
                </div>
                <div class="card-body">
                    <p class="card-description">
                        高级数据分析功能，包含图表可视化、数据筛选和导出功能。
                        <span class="badge badge-warning">大小: 42KB</span>
                    </p>

                    <button id="loadModuleA" class="btn">
                        <span class="btn-text">加载数据分析模块</span>
                    </button>

                    <div id="moduleAStatus" class="status-container">
                        <span class="badge badge-info">状态: 未加载</span>
                    </div>
                </div>
            </div>

            <!-- 模块B -->
            <div class="module-card" data-module="moduleB">
                <div class="card-header">
                    <h2 class="card-title">
                        <span class="card-icon">B</span>
                        用户管理模块
                    </h2>
                </div>
                <div class="card-body">
                    <p class="card-description">
                        完整的用户管理系统，支持角色分配、权限管理和用户活动跟踪。
                        <span class="badge badge-warning">大小: 56KB</span>
                    </p>

                    <button id="loadModuleB" class="btn">
                        <span class="btn-text">加载用户管理模块</span>
                    </button>

                    <div id="moduleBStatus" class="status-container">
                        <span class="badge badge-info">状态: 未加载</span>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <footer>
        <p>© 2023 企业解决方案 | 商业级延迟加载系统</p>
    </footer>

    <script src="lazy-loader.js"></script>
</body>
</html>

2. 核心加载器 (lazy-loader.js)

'use strict';

// ==========================================
// 模块加载系统 - 企业级解决方案
// ==========================================

/**
 * 模块状态枚举
 * @enum {string}
 */
const ModuleState = {
    NOT_LOADED: 'not_loaded',
    LOADING: 'loading',
    LOADED: 'loaded',
    ERROR: 'error'
};

/**
 * 模块配置 - 集中管理所有模块
 * 此处可添加更多模块配置
 */
const MODULES_CONFIG = {
    moduleA: {
        url: './modules/module-a.js',
        name: '数据分析模块',
        // 生产环境中应添加SRI哈希值
        // integrity: 'sha256-abc123...',
        timeout: 10000 // 10秒超时
    },
    moduleB: {
        url: './modules/module-b.js',
        name: '用户管理模块',
        timeout: 10000
    }
};

/**
 * 模块加载器类
 */
class ModuleLoader {
    constructor() {
        this.moduleStates = new Map();
        this.init();
    }

    /**
     * 初始化加载器
     */
    init() {
        // 初始化所有模块状态
        Object.keys(MODULES_CONFIG).forEach(moduleName => {
            this.moduleStates.set(moduleName, {
                state: ModuleState.NOT_LOADED,
                element: document.getElementById(`${moduleName}Status`)
            });

            // 设置初始状态显示
            this.updateStatusUI(moduleName, '模块尚未加载');
        });

        // 绑定事件监听器
        this.setupEventListeners();
    }

    /**
     * 设置事件监听器
     */
    setupEventListeners() {
        document.getElementById('loadModuleA').addEventListener('click', () => {
            this.loadModule('moduleA');
        });

        document.getElementById('loadModuleB').addEventListener('click', () => {
            this.loadModule('moduleB');
        });
    }

    /**
     * 加载指定模块
     * @param {string} moduleName - 模块名称
     */
    async loadModule(moduleName) {
        const config = MODULES_CONFIG[moduleName];
        if (!config) {
            console.error(`模块 ${moduleName} 配置不存在`);
            return;
        }

        const button = document.getElementById(`load${moduleName.charAt(0).toUpperCase() + moduleName.slice(1)}`);
        const statusEl = document.getElementById(`${moduleName}Status`);

        // 检查当前状态
        const currentState = this.moduleStates.get(moduleName).state;
        if (currentState === ModuleState.LOADING || currentState === ModuleState.LOADED) {
            return;
        }

        // 更新状态
        this.moduleStates.set(moduleName, {
            state: ModuleState.LOADING,
            element: statusEl
        });

        // 更新UI
        button.disabled = true;
        this.updateButtonUI(button, 'loading', '加载中...');
        this.updateStatusUI(moduleName, `正在加载 ${config.name}...`);

        try {
            // 加载模块脚本
            await this.loadScript(moduleName, config);

            // 初始化模块
            if (typeof window[moduleName]?.init === 'function') {
                window[moduleName].init();
                console.log(`${config.name} 初始化完成`);
            } else {
                console.warn(`${config.name} 没有导出 init 方法`);
            }

            // 更新状态
            this.moduleStates.set(moduleName, {
                state: ModuleState.LOADED,
                element: statusEl
            });

            // 更新UI
            this.updateButtonUI(button, 'loaded', '已加载');
            this.updateStatusUI(moduleName, `${config.name} 加载并初始化完成`, 'success');
        } catch (error) {
            console.error(`${config.name} 加载失败:`, error);

            // 更新状态
            this.moduleStates.set(moduleName, {
                state: ModuleState.ERROR,
                element: statusEl
            });

            // 更新UI
            this.updateButtonUI(button, 'error', '加载失败');
            this.updateStatusUI(moduleName, `加载失败: ${error.message}`, 'error');
        }
    }

    /**
     * 动态加载脚本
     * @param {string} moduleName - 模块名称
     * @param {Object} config - 模块配置
     * @returns {Promise}
     */
    loadScript(moduleName, config) {
        return new Promise((resolve, reject) => {
            const script = document.createElement('script');
            script.src = config.url;

            // 设置超时处理
            const timeoutId = setTimeout(() => {
                cleanup();
                reject(new Error(`加载超时 (${config.timeout}ms)`));
            }, config.timeout);

            // 清理函数
            const cleanup = () => {
                clearTimeout(timeoutId);
                script.onload = null;
                script.onerror = null;
            };

            // 加载成功
            script.onload = () => {
                cleanup();
                resolve();
            };

            // 加载失败
            script.onerror = (error) => {
                cleanup();
                reject(new Error(`脚本加载失败: ${error.message || '未知错误'}`));
            };

            // 添加SRI校验（生产环境中应启用）
            if (config.integrity) {
                script.integrity = config.integrity;
                script.crossOrigin = 'anonymous';
            }

            // 添加到文档
            document.head.appendChild(script);
        });
    }

    /**
     * 更新按钮UI状态
     * @param {HTMLElement} button - 按钮元素
     * @param {string} state - 状态 (loading/loaded/error)
     * @param {string} text - 按钮文本
     */
    updateButtonUI(button, state, text) {
        if (!button) return;

        const btnText = button.querySelector('.btn-text');
        if (!btnText) return;

        // 移除现有spinner
        const spinner = button.querySelector('.spinner');
        if (spinner) spinner.remove();

        // 更新按钮状态
        switch (state) {
            case 'loading':
                // 添加spinner
                const spinnerEl = document.createElement('span');
                spinnerEl.className = 'spinner';
                button.insertBefore(spinnerEl, btnText);
                btnText.textContent = text;
                button.classList.remove('btn-success');
                break;

            case 'loaded':
                btnText.textContent = text;
                button.classList.add('btn-success');
                button.disabled = true;
                break;

            case 'error':
                btnText.textContent = text;
                button.disabled = false;
                break;
        }
    }

    /**
     * 更新状态显示
     * @param {string} moduleName - 模块名称
     * @param {string} message - 状态消息
     * @param {string} [statusType] - 状态类型 (success/error)
     */
    updateStatusUI(moduleName, message, statusType) {
        const moduleData = this.moduleStates.get(moduleName);
        if (!moduleData || !moduleData.element) return;

        const statusEl = moduleData.element;

        // 清除现有类
        statusEl.className = 'status-container';

        // 添加状态类
        if (statusType === 'success') {
            statusEl.classList.add('success');
        } else if (statusType === 'error') {
            statusEl.classList.add('error');
        }

        // 更新内容
        statusEl.innerHTML = `
            <div><strong>${MODULES_CONFIG[moduleName].name}</strong></div>
            <div>${message}</div>
            <div class="status-meta">
                <span class="badge badge-info">状态: ${this.getStatusText(moduleData.state)}</span>
                <span class="badge badge-info">时间: ${new Date().toLocaleTimeString()}</span>
            </div>
        `;
    }

    /**
     * 获取状态文本
     * @param {string} state - 状态枚举值
     * @returns {string} 状态文本
     */
    getStatusText(state) {
        switch (state) {
            case ModuleState.NOT_LOADED: return '未加载';
            case ModuleState.LOADING: return '加载中';
            case ModuleState.LOADED: return '已加载';
            case ModuleState.ERROR: return '错误';
            default: return '未知';
        }
    }
}

// 初始化模块加载器
document.addEventListener('DOMContentLoaded', () => {
    try {
        new ModuleLoader();
        console.log('模块加载系统已初始化');
    } catch (error) {
        console.error('模块加载系统初始化失败:', error);

        // 显示全局错误
        const errorContainer = document.createElement('div');
        errorContainer.style = `
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            padding: 1rem;
            background: #ffebee;
            color: #b71c1c;
            text-align: center;
            z-index: 1000;
            font-weight: bold;
        `;
        errorContainer.textContent = '系统初始化失败，请刷新页面或联系技术支持';
        document.body.prepend(errorContainer);
    }
});

3. 模块实现 (modules/module-a.js)

// 模块A - 数据分析模块
window.moduleA = (function() {
    // 私有状态
    const state = {
        initialized: false,
        version: '1.2.0',
        lastInitTime: null
    };

    // DOM元素缓存
    let statusElement;

    /**
     * 初始化模块
     */
    function init() {
        if (state.initialized) {
            console.warn('moduleA 已经初始化过');
            return;
        }

        console.log(`初始化数据分析模块 v${state.version}`);
        state.initialized = true;
        state.lastInitTime = new Date();

        // 获取状态元素
        statusElement = document.getElementById('moduleAStatus');

        // 模拟模块功能
        simulateModuleFunctionality();

        // 更新UI
        updateStatusUI();
    }

    /**
     * 模拟模块功能
     */
    function simulateModuleFunctionality() {
        // 这里可以添加实际的功能代码
        console.log('数据分析模块功能已激活');

        // 模拟数据处理
        setTimeout(() => {
            if (statusElement) {
                const info = document.createElement('div');
                info.textContent = '数据分析完成: 生成5份报告';
                info.style.marginTop = '10px';
                info.style.color = '#34a853';
                statusElement.appendChild(info);
            }
        }, 1500);
    }

    /**
     * 更新状态UI
     */
    function updateStatusUI() {
        if (!statusElement) return;

        const meta = statusElement.querySelector('.status-meta');
        if (meta) {
            const versionBadge = document.createElement('span');
            versionBadge.className = 'badge badge-info';
            versionBadge.textContent = `版本: ${state.version}`;
            meta.appendChild(versionBadge);
        }
    }

    // 公共API
    return {
        init: init,
        getVersion: () => state.version
    };
})();

4. 模块实现 (modules/module-b.js)

// 模块B - 用户管理模块
window.moduleB = (function() {
    // 私有状态
    const state = {
        initialized: false,
        version: '1.1.3',
        users: []
    };

    // DOM元素缓存
    let statusElement;

    /**
     * 初始化模块
     */
    function init() {
        if (state.initialized) {
            console.warn('moduleB 已经初始化过');
            return;
        }

        console.log(`初始化用户管理模块 v${state.version}`);
        state.initialized = true;

        // 获取状态元素
        statusElement = document.getElementById('moduleBStatus');

        // 模拟加载用户数据
        loadUserData();

        // 更新UI
        updateStatusUI();
    }

    /**
     * 模拟加载用户数据
     */
    function loadUserData() {
        // 模拟API请求
        setTimeout(() => {
            state.users = [
                { id: 1, name: '张三', role: '管理员' },
                { id: 2, name: '李四', role: '编辑' },
                { id: 3, name: '王五', role: '查看者' }
            ];

            if (statusElement) {
                const info = document.createElement('div');
                info.textContent = `已加载 ${state.users.length} 个用户`;
                info.style.marginTop = '10px';
                info.style.color = '#34a853';
                statusElement.appendChild(info);
            }
        }, 2000);
    }

    /**
     * 更新状态UI
     */
    function updateStatusUI() {
        if (!statusElement) return;

        const meta = statusElement.querySelector('.status-meta');
        if (meta) {
            const versionBadge = document.createElement('span');
            versionBadge.className = 'badge badge-info';
            versionBadge.textContent = `版本: ${state.version}`;
            meta.appendChild(versionBadge);
        }
    }

    // 公共API
    return {
        init: init,
        getUsers: () => [...state.users]
    };
})();