# 前端性能优化实践：代码分割与懒加载技术应用指南

现代前端应用性能优化中，代码分割与懒加载是提升用户体验的关键技术。本文将详细介绍五种实用技巧及其实现方案。

## 代码分割基础策略

### 1. 动态导入与路由分割

使用动态导入实现基于路由的代码分割：

```javascript

// 传统的静态导入方式（所有路由同时加载）

// import Home from './pages/Home';

// import About from './pages/About';

// import Contact from './pages/Contact';

// 优化：基于路由的动态导入

import React, { Suspense, lazy } from 'react';

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

// 使用React.lazy进行代码分割

const Home = lazy(() => import('./pages/Home'));

const About = lazy(() => import('./pages/About'));

const Contact = lazy(() => import('./pages/Contact'));

const Products = lazy(() => import('./pages/Products'));

const ProductDetail = lazy(() => import('./pages/ProductDetail'));

// 自定义加载组件

const LoadingFallback = () => (

  <div className="loading-container">

    <div className="loading-spinner"></div>

    <p>页面加载中...</p>

  </div>

);

// 配置路由分割点

const App = () => {

  return (

    <Router>

      <Suspense fallback={<LoadingFallback />}>

        <Routes>

          <Route path="/" element={<Home />} />

          <Route path="/about" element={<About />} />

          <Route path="/contact" element={<Contact />} />

          <Route path="/products" element={<Products />} />

          <Route path="/products/:id" element={<ProductDetail />} />

        </Routes>

      </Suspense>

    </Router>

  );

};

// Webpack配置优化（webpack.config.js）

module.exports = {

  optimization: {

    splitChunks: {

      chunks: 'all',

      cacheGroups: {

        vendor: {

          test: /[\\/]node_modules[\\/]/,

          name: 'vendors',

          chunks: 'all',

        },

        common: {

          name: 'common',

          minChunks: 2,

          chunks: 'async',

          reuseExistingChunk: true,

        },

      },

    },

    runtimeChunk: {

      name: 'runtime',

    },

  },

};

// 使用魔法注释优化打包命名和预加载

const AdminPanel = lazy(() => 

  import(/* webpackChunkName: "admin" */ './pages/AdminPanel')

);

const AnalyticsDashboard = lazy(() =>

  import(

    /* webpackChunkName: "analytics" */

    /* webpackPrefetch: true */ 

    './pages/AnalyticsDashboard'

  )

);

```

### 2. 组件级懒加载优化

实现细粒度的组件懒加载策略：

```javascript

// components/LazyImage.jsx - 图片懒加载组件

import React, { useState, useEffect, useRef } from 'react';

const LazyImage = ({ 

  src, 

  alt, 

  placeholder, 

  width, 

  height,

  className,

  threshold = 0.1,

  rootMargin = '50px'

}) => {

  const [isLoaded, setIsLoaded] = useState(false);

  const [isInView, setIsInView] = useState(false);

  const imgRef = useRef(null);

  const placeholderRef = useRef(null);

  useEffect(() => {

    const observer = new IntersectionObserver(

      (entries) => {

        entries.forEach(entry => {

          if (entry.isIntersecting) {

            setIsInView(true);

            observer.unobserve(entry.target);

          }

        });

      },

      {

        threshold,

        rootMargin,

      }

    );

    if (imgRef.current) {

      observer.observe(imgRef.current);

    }

    return () => {

      if (imgRef.current) {

        observer.unobserve(imgRef.current);

      }

    };

  }, [threshold, rootMargin]);

  useEffect(() => {

    if (isInView && !isLoaded) {

      const img = new Image();

      img.src = src;

      img.=> {

        setIsLoaded(true);

        if (placeholderRef.current) {

          placeholderRef.current.style.opacity = '0';

        }

      };

      img.=> {

        console.error(`图片加载失败: ${src}`);

      };

    }

  }, [isInView, src, isLoaded]);

  return (

    <div 

      ref={imgRef} 

      className={`lazy-image-container ${className || ''}`}

      style={{ 

        width: width || '100%', 

        height: height || 'auto',

        position: 'relative',

        overflow: 'hidden'

      }}

    >

      {/* 占位符 */}

      {!isLoaded && (

        <div 

          ref={placeholderRef}

          className="image-placeholder"

          style={{

            position: 'absolute',

            top: 0,

            left: 0,

            width: '100%',

            height: '100%',

            background: placeholder || '#f0f0f0',

            transition: 'opacity 0.3s ease',

            display: 'flex',

            alignItems: 'center',

            justifyContent: 'center'

          }}

        >

          <div className="placeholder-spinner"></div>

        </div>

      )}

      

      {/* 实际图片 */}

      {isInView && (

        <img

          src={src}

          alt={alt}

          className={`lazy-loaded-image ${isLoaded ? 'loaded' : 'loading'}`}

          style={{

            width: '100%',

            height: '100%',

            objectFit: 'cover',

            opacity: isLoaded ? 1 : 0,

            transition: 'opacity 0.3s ease',

          }}

          loading="lazy"

          decoding="async"

        />

      )}

    </div>

  );

};

// 使用示例

const ProductGallery = ({ products }) => {

  return (

    <div className="product-gallery">

      {products.map(product => (

        <LazyImage

          key={product.id}

          src={product.imageUrl}

          alt={product.name}

          placeholder={`#${product.color}`}

          width={300}

          height={400}

          threshold={0.05}

          rootMargin="100px"

        />

      ))}

    </div>

  );

};

// components/ModalLazy.jsx - 模态框懒加载

import React, { lazy, Suspense } from 'react';

const ModalLazy = ({ isOpen, onClose, modalType }) => {

  const ModalComponent = lazy(() => {

    // 根据类型动态加载不同模态框

    switch(modalType) {

      case 'login':

        return import('./modals/LoginModal');

      case 'signup':

        return import('./modals/SignupModal');

      case 'settings':

        return import('./modals/SettingsModal');

      case 'confirm':

        return import('./modals/ConfirmModal');

      default:

        return import('./modals/DefaultModal');

    }

  });

  if (!isOpen) return null;

  return (

    <div className="modal-overlay" >

      <Suspense fallback={

        <div className="modal-loading">

          <div className="spinner"></div>

        </div>

      }>

        <div className="modal-content" => e.stopPropagation()}>

          <ModalComponent />

        </div>

      </Suspense>

    </div>

  );

};

```

## 高级优化技巧

### 3. 基于用户交互的预测性加载

实现智能的预测性代码加载：

```javascript

// utils/predictiveLoader.js - 预测性加载器

class PredictiveLoader {

  constructor() {

    this.preloadedChunks = new Set();

    this.userBehavior = {

      hoverTime: 0,

      clickPattern: [],

      scrollDepth: 0

    };

    this.thresholds = {

      hover: 800, // 800ms悬停触发预加载

      scroll: 0.7, // 滚动到70%预加载下一页

      connection: '4g' // 根据网络条件调整策略

    };

  }

  // 链接悬停预加载

  setupLinkHoverPrediction() {

    document.addEventListener('mouseover', (e) => {

      const link = e.target.closest('a[data-prefetch]');

      if (link && !this.preloadedChunks.has(link.href)) {

        this.hoverTimer = setTimeout(() => {

          this.prefetchLink(link);

        }, this.thresholds.hover);

      }

    });

    document.addEventListener('mouseout', (e) => {

      const link = e.target.closest('a[data-prefetch]');

      if (link && this.hoverTimer) {

        clearTimeout(this.hoverTimer);

      }

    });

  }

  async prefetchLink(link) {

    const href = link.href;

    const route = this.extractRouteFromHref(href);

    

    try {

      // 预加载相关资源

      await Promise.all([

        this.prefetchJavaScript(route),

        this.prefetchData(route),

        this.prefetchAssets(route)

      ]);

      

      this.preloadedChunks.add(href);

      link.setAttribute('data-prefetched', 'true');

      

    } catch (error) {

      console.warn(`预加载失败: ${href}`, error);

    }

  }

  async prefetchJavaScript(route) {

    // 根据路由预加载JS模块

    const moduleMap = {

      '/products': () => import('../pages/Products'),

      '/products/detail': () => import('../pages/ProductDetail'),

      '/cart': () => import('../pages/Cart'),

      '/checkout': () => import('../pages/Checkout')

    };

    if (moduleMap[route]) {

      return moduleMap[route]();

    }

  }

  async prefetchData(route) {

    // 预加载API数据

    const apiEndpoints = {

      '/products': '/api/products/prefetch',

      '/products/detail': (id) => `/api/products/${id}/prefetch`

    };

    if (apiEndpoints[route]) {

      const endpoint = typeof apiEndpoints[route] === 'function' 

        ? apiEndpoints[route](this.extractIdFromRoute(route))

        : apiEndpoints[route];

      

      return fetch(endpoint, {

        headers: { 'X-Prefetch': 'true' }

      }).then(res => res.json());

    }

  }

  // 滚动预测加载

  setupScrollPrediction() {

    let scrollTimeout;

    

    window.addEventListener('scroll', () => {

      clearTimeout(scrollTimeout);

      scrollTimeout = setTimeout(() => {

        this.checkScrollPosition();

      }, 100);

    });

  }

  checkScrollPosition() {

    const scrollPercentage = (window.scrollY + window.innerHeight) / 

                           document.documentElement.scrollHeight;

    

    this.userBehavior.scrollDepth = Math.max(

      this.userBehavior.scrollDepth, 

      scrollPercentage

    );

    // 滚动到阈值时预加载下一页内容

    if (scrollPercentage > this.thresholds.scroll) {

      this.preloadNextPage();

    }

  }

  async preloadNextPage() {

    const nextPage = this.determineNextPage();

    if (nextPage && !this.preloadedChunks.has(nextPage)) {

      await this.prefetchJavaScript(nextPage);

      this.preloadedChunks.add(nextPage);

    }

  }

  // 网络感知加载

  setupNetworkAwareLoading() {

    if ('connection' in navigator) {

      const connection = navigator.connection;

      

      // 根据网络类型调整阈值

      if (connection.effectiveType.includes('2g')) {

        this.thresholds.hover = 1500;

        this.thresholds.scroll = 0.9;

      } else if (connection.effectiveType.includes('3g')) {

        this.thresholds.hover = 1000;

        this.thresholds.scroll = 0.8;

      }

      // 监听网络变化

      connection.addEventListener('change', () => {

        this.adjustThresholdsBasedOnNetwork();

      });

    }

  }

  // 初始化所有预测功能

  initialize() {

    this.setupLinkHoverPrediction();

    this.setupScrollPrediction();

    this.setupNetworkAwareLoading();

    

    return this;

  }

}

// 使用示例

const loader = new PredictiveLoader().initialize();

// components/SmartComponent.jsx - 智能组件加载

import React, { useState, useEffect } from 'react';

const SmartComponent = ({ componentId, priority = 'low' }) => {

  const [Component, setComponent] = useState(null);

  const [loadTime, setLoadTime] = useState(null);

  useEffect(() => {

    const loadComponent = async () => {

      const startTime = performance.now();

      

      // 根据优先级和网络条件调整加载策略

      const shouldLoadNow = 

        priority === 'high' || 

        document.visibilityState === 'visible';

      

      if (shouldLoadNow) {

        try {

          const module = await import(`./components/${componentId}`);

          const endTime = performance.now();

          setLoadTime(endTime - startTime);

          setComponent(() => module.default);

        } catch (error) {

          console.error(`组件加载失败: ${componentId}`, error);

        }

      }

    };

    loadComponent();

  }, [componentId, priority]);

  if (!Component) {

    return (

      <div className="smart-component-placeholder">

        {priority === 'high' ? '加载重要组件...' : '组件待加载'}

      </div>

    );

  }

  return (

    <div className="smart-component">

      <Component />

      {loadTime && (

        <div className="performance-info">

          加载耗时: {loadTime.toFixed(2)}ms

        </div>

      )}

    </div>

  );

};

```

### 4. 第三方库的优化分割

优化第三方库的加载策略：

```javascript

// utils/vendorOptimization.js - 第三方库优化

import React from 'react';

// 1. 按需加载大型库

const loadLargeLibrary = (libraryName) => {

  const libraryMap = {

    'monaco-editor': () => import('monaco-editor'),

    'd3': () => import('d3'),

    'three': () => import('three'),

    'chartjs': () => import('chart.js'),

    'moment': () => import('moment'),

    'lodash': () => import('lodash-es') // 使用ES模块版本

  };

  return libraryMap[libraryName] 

    ? libraryMap[libraryName]() 

    : Promise.reject(new Error(`未知的库: ${libraryName}`));

<"7k.3p1w2.cn"><"1d.6e1w7.cn"><"4g.5w7x1.cn"><"8n.9v1n2.cn">

};

// 2. 第三方库懒加载组件

const LazyMonacoEditor = React.lazy(() => 

  import('monaco-editor').then(module => ({

    default: ({ value, language, onChange }) => {

      const [editor, setEditor] = React.useState(null);

      const containerRef = React.useRef(null);

      React.useEffect(() => {

        if (containerRef.current && !editor) {

          const monacoEditor = module.editor.create(

            containerRef.current,

            {

              value,

              language,

              theme: 'vs-dark',

              automaticLayout: true,

              minimap: { enabled: false }

            }

          );

          monacoEditor.onDidChangeModelContent(() => {

            onChange(monacoEditor.getValue());

          });

          setEditor(monacoEditor);

        }

        return () => {

          if (editor) {

            editor.dispose();

          }

        };

      }, [containerRef, editor, language]);

      return <div ref={containerRef} style={{ height: '500px' }} />;

    }

  }))

);

// 3. 共享vendor chunk配置

export const configureVendorSplitting = () => {

  // Webpack配置示例

  return {

    optimization: {

      splitChunks: {

        cacheGroups: {

          reactVendor: {

            test: /[\\/]node_modules[\\/](react|react-dom|react-router-dom)[\\/]/,

            name: 'react-vendor',

            chunks: 'all',

            priority: 20,

          },

          uiVendor: {

            test: /[\\/]node_modules[\\/](@mui|antd|bootstrap)[\\/]/,

            name: 'ui-vendor',

            chunks: 'all',

            priority: 15,

          },

          chartVendor: {

            test: /[\\/]node_modules[\\/](chart|d3|echarts)[\\/]/,

            name: 'chart-vendor',

            chunks: 'async',

            priority: 10,

          },

          utilityVendor: {

            test: /[\\/]node_modules[\\/](lodash|moment|date-fns|axios)[\\/]/,

            name: 'utility-vendor',

            chunks: 'async',

            priority: 5,

          },

        },

      },

    },

  };

};

// 4. 动态Polyfill加载

const loadPolyfills = async () => {

  const polyfills = [];

  

  // 检查浏览器支持情况

  if (!window.IntersectionObserver) {

    polyfills.push(

      import('intersection-observer').then(() => {

        console.log('IntersectionObserver polyfill loaded');

      })

    );

  }

  

  if (!window.ResizeObserver) {

    polyfills.push(

      import('resize-observer-polyfill').then(() => {

        console.log('ResizeObserver polyfill loaded');

      })

    );

  }

  

  if (!window.Promise) {

    polyfills.push(

      import('promise-polyfill').then(() => {

        console.log('Promise polyfill loaded');

      })

    );

  }

  

  if (!window.fetch) {

    polyfills.push(

      import('whatwg-fetch').then(() => {

        console.log('Fetch polyfill loaded');

      })

    );

  }

  

  await Promise.all(polyfills);

};

// 5. 条件加载第三方SDK

const loadThirdPartySDK = (sdkName, options = {}) => {

  const sdkConfig = {

    'google-analytics': {

      url: 'https://www.googletagmanager.com/gtag/js',

      condition: () => !window.gtag,

      callback: () => {

        window.dataLayer = window.dataLayer || [];

        window.gtag = function(){ dataLayer.push(arguments); };

        gtag('js', new Date());

        gtag('config', options.trackingId);

      }

    },

    'facebook-pixel': {

      url: `https://connect.facebook.net/en_US/fbevents.js`,

      condition: () => !window.fbq,

      callback: () => {

        window.fbq = function(){ 

          window._fbq.push(arguments);

        };

        fbq('init', options.pixelId);

        fbq('track', 'PageView');

      }

    },

    'stripe': {

      url: 'https://js.stripe.com/v3/',

      condition: () => !window.Stripe,

      callback: () => {

        window.stripe = window.Stripe(options.publishableKey);

      }

    }

  };

  

  const config = sdkConfig[sdkName];

  if (!config) return Promise.reject(new Error(`未知的SDK: ${sdkName}`));

  

  if (config.condition && config.condition()) {

    return new Promise((resolve, reject) => {

      const script = document.createElement('script');

      script.src = config.url;

      script.async = true;

      script.defer = true;

      

      script.=> {

        if (config.callback) config.callback();

        resolve();

      };

      

      script.=> {

        reject(new Error(`Failed to load ${sdkName} SDK`));

      };

      

      document.head.appendChild(script);

    });

  }

  

  return Promise.resolve();

};

// 使用示例

export const initializeAnalytics = async () => {

  // 只在用户交互后加载分析SDK

  document.addEventListener('click', async () => {

    await loadThirdPartySDK('google-analytics', {

      trackingId: 'UA-XXXXX-Y'

    });

  }, { once: true });

};

```

## 性能监控与调优

### 5. 性能监控与自适应加载

实现性能监控和自适应加载策略：

```javascript

// utils/performanceMonitor.js - 性能监控器

class PerformanceMonitor {

  constructor() {

    this.metrics = {

      navigation: {},

      resources: [],

      userTiming: [],

      longTasks: []

    };

    

    this.thresholds = {

      fcp: 1800,      // First Contentful Paint

      lcp: 2500,      // Largest Contentful Paint

      fid: 100,       // First Input Delay

      cls: 0.1,       // Cumulative Layout Shift

      tti: 3800       // Time to Interactive

    };

    

    this.init();

  }

  init() {

    this.setupPerformanceObserver();

    this.setupNavigationTiming();

    this.setupResourceTiming();

    this.setupLongTaskObserver();

    this.setupLayoutShiftObserver();

  }

  setupPerformanceObserver() {

    if ('PerformanceObserver' in window) {

      // 监听绘制指标

      const paintObserver = new PerformanceObserver((list) => {

        for (const entry of list.getEntries()) {

          this.metrics[entry.name] = entry.startTime;

        }

      });

      paintObserver.observe({ entryTypes: ['paint'] });

      // 监听最大内容绘制

      const lcpObserver = new PerformanceObserver((list) => {

        const entries = list.getEntries();

        const lastEntry = entries[entries.length - 1];

        this.metrics.lcp = lastEntry.startTime;

      });

      lcpObserver.observe({ entryTypes: ['largest-contentful-paint'] });

    }

  }

  setupNavigationTiming() {

    if (performance.getEntriesByType) {

      const navigationEntry = performance.getEntriesByType('navigation')[0];

      if (navigationEntry) {

        this.metrics.navigation = {

          dns: navigationEntry.domainLookupEnd - navigationEntry.domainLookupStart,

          tcp: navigationEntry.connectEnd - navigationEntry.connectStart,

          ssl: navigationEntry.secureConnectionStart > 0 

            ? navigationEntry.connectEnd - navigationEntry.secureConnectionStart 

            : 0,

          ttfb: navigationEntry.responseStart - navigationEntry.requestStart,

          download: navigationEntry.responseEnd - navigationEntry.responseStart,

          domInteractive: navigationEntry.domInteractive,

          domComplete: navigationEntry.domComplete,

          loadEvent: navigationEntry.loadEventEnd - navigationEntry.loadEventStart

        };

      }

    }

  }

  setupResourceTiming() {

    if (performance.getEntriesByType) {

      this.metrics.resources = performance.getEntriesByType('resource')

        .map(resource => ({

          name: resource.name,

          duration: resource.duration,

          transferSize: resource.transferSize,

          initiatorType: resource.initiatorType

        }))

<"2t.2n8j1.cn"><"5a.1f6d1.cn"><"9e.7e5s1.cn"><"uf.5w7x1.cn">

        .filter(resource => resource.duration > 100); // 只记录耗时超过100ms的资源

    }

  }

  setupLongTaskObserver() {

    if ('PerformanceObserver' in window) {

      const observer = new PerformanceObserver((list) => {

        for (const entry of list.getEntries()) {

          this.metrics.longTasks.push({

            duration: entry.duration,

            startTime: entry.startTime,

            name: entry.name

          });

        }

      });

      observer.observe({ entryTypes: ['longtask'] });

    }

  }

  setupLayoutShiftObserver() {

    if ('PerformanceObserver' in window) {

      let clsValue = 0;

      let sessionCount = 0;

      

      const observer = new PerformanceObserver((list) => {

        for (const entry of list.getEntries()) {

          if (!entry.hadRecentInput) {

            sessionCount++;

            clsValue += entry.value;

          }

        }

        this.metrics.cls = clsValue;

        this.metrics.clsSessions = sessionCount;

      });

      

      observer.observe({ entryTypes: ['layout-shift'] });

    }

  }

  getPerformanceScore() {

    const scores = [];

    

    // 计算各指标得分

    if (this.metrics.fcp) {

      scores.push(this.calculateScore('fcp', this.metrics.fcp));

    }

    

    if (this.metrics.lcp) {

      scores.push(this.calculateScore('lcp', this.metrics.lcp));

    }

    

    if (this.metrics.fid) {

      scores.push(this.calculateScore('fid', this.metrics.fid));

    }

    

    if (this.metrics.cls) {

      scores.push(this.calculateScore('cls', this.metrics.cls));

    }

    

    return scores.length > 0 

      ? scores.reduce((sum, score) => sum + score, 0) / scores.length

      : 0;

  }

  calculateScore(metric, value) {

    const threshold = this.thresholds[metric];

    if (!threshold) return 100;

    

    // 简单的线性评分模型

    const ratio = Math.min(value / threshold, 2); // 最大2倍阈值

    return Math.max(0, 100 - (ratio - 1) * 100);

  }

  generateReport() {

    return {

      timestamp: new Date().toISOString(),

      score: this.getPerformanceScore(),

      metrics: this.metrics,

      recommendations: this.generateRecommendations()

    };

  }

  generateRecommendations() {

    const recommendations = [];

    

    // 基于性能数据生成优化建议

    if (this.metrics.navigation.ttfb > 500) {

      recommendations.push({

        type: 'server',

        priority: 'high',

        message: '首字节时间较长，建议优化服务器响应时间或使用CDN',

        metric: 'TTFB',

        value: `${this.metrics.navigation.ttfb.toFixed(0)}ms`

      });

    }

    

    if (this.metrics.resources.some(r => r.duration > 1000)) {

      const slowResources = this.metrics.resources.filter(r => r.duration > 1000);

      recommendations.push({

        type: 'resource',

        priority: 'medium',

        message: `检测到${slowResources.length}个加载缓慢的资源`,

        resources: slowResources.map(r => ({

          name: r.name,

          duration: `${r.duration.toFixed(0)}ms`

        }))

      });

    }

    

    if (this.metrics.longTasks.length > 3) {

      recommendations.push({

        type: 'javascript',

        priority: 'high',

        message: `检测到${this.metrics.longTasks.length}个长任务，建议进行代码分割`,

        suggestion: '考虑将大型计算任务拆分为多个小任务或使用Web Workers'

      });

    }

    

    return recommendations;

  }

}

// 自适应加载控制器

class AdaptiveLoader {

  constructor() {

    this.monitor = new PerformanceMonitor();

    this.strategies = {

      'fast': this.fastConnectionStrategy,

      'slow': this.slowConnectionStrategy,

      'critical': this.criticalStrategy

    };

    this.currentStrategy = 'fast';

  }

  async determineStrategy() {

    const score = this.monitor.getPerformanceScore();

    const networkInfo = navigator.connection;

    

    if (score < 50 || (networkInfo && networkInfo.effectiveType === '2g')) {

      this.currentStrategy = 'slow';

    } else if (score > 80) {

      this.currentStrategy = 'fast';

    } else {

      this.currentStrategy = 'critical';

    }

    

    return this.currentStrategy;

  }

  fastConnectionStrategy() {

    // 快速连接：预加载更多资源

    return {

      prefetch: true,

      prefetchLimit: 5,

      imageQuality: 'high',

      componentPriority: 'all',

      chunkSize: 'normal'

    };

  }

  slowConnectionStrategy() {

    // 慢速连接：仅加载必要资源

    return {

      prefetch: false,

      prefetchLimit: 0,

      imageQuality: 'low',

      componentPriority: 'critical',

      chunkSize: 'small',

      deferNonCritical: true

    };

  }

  criticalStrategy() {

    // 中等连接：平衡策略

    return {

      prefetch: true,

      prefetchLimit: 2,

      imageQuality: 'medium',

      componentPriority: 'above-fold',

      chunkSize: 'normal',

      lazyLoadThreshold: 0.5

    };

  }

  async loadComponent(componentPath, options = {}) {

    const strategy = await this.determineStrategy();

    const config = this.strategies[strategy]();

    

    // 根据策略调整加载行为

    if (config.deferNonCritical && options.priority === 'low') {

      return this.deferLoading(componentPath);

    }

    

    return import(componentPath);

  }

  deferLoading(componentPath) {

    // 延迟加载非关键组件

    return new Promise((resolve) => {

      const loadWhenIdle = () => {

        if ('requestIdleCallback' in window) {

          requestIdleCallback(() => {

            import(componentPath).then(resolve);

          }, { timeout: 5000 });

        } else {

          // 回退方案：延迟2秒加载

          setTimeout(() => {

            import(componentPath).then(resolve);

          }, 2000);

        }

      };

      

      // 等待页面加载完成

      if (document.readyState === 'complete') {

        loadWhenIdle();

      } else {

        window.addEventListener('load', loadWhenIdle);

      }

    });

  }

  optimizeImageLoading(imgElement, src, options = {}) {

    const strategy = this.currentStrategy;

    

    let optimizedSrc = src;

    

    // 根据连接速度调整图片质量

    if (strategy === 'slow') {

      optimizedSrc = this.convertToLowQuality(src);

      imgElement.setAttribute('loading', 'lazy');

      imgElement.setAttribute('decoding', 'async');

    } else if (strategy === 'critical') {

      imgElement.setAttribute('loading', 'eager');

    }

    

    // 添加资源提示

    if (strategy !== 'slow' && options.important) {

      const link = document.createElement('link');

      link.rel = 'preload';

      link.as = 'image';

      link.href = optimizedSrc;

      document.head.appendChild(link);

    }

    

    return optimizedSrc;

  }

  convertToLowQuality(src) {

    // 转换为低质量版本（假设有图片处理服务）

    if (src.includes('cloudinary.com')) {

      return src.replace('/upload/', '/upload/q_30,f_auto/');

    }

    if (src.includes('imgix.net')) {

      return `${src}?q=30&auto=format`;

    }

    return src;

  }

}

// 使用示例

const adaptiveLoader = new AdaptiveLoader();

// 在应用初始化时使用

const initApp = async () => {

  const performanceReport = adaptiveLoader.monitor.generateReport();

  console.log('性能报告:', performanceReport);

  

  // 根据性能调整加载策略

  const strategy = await adaptiveLoader.determineStrategy();

  console.log('当前加载策略:', strategy);

  

  // 加载关键组件

  const CriticalComponent = await adaptiveLoader.loadComponent(

    './components/CriticalComponent',

    { priority: 'high' }

  );

  

  // 非关键组件延迟加载

  const NonCriticalComponent = await adaptiveLoader.loadComponent(

    './components/NonCriticalComponent',

    { priority: 'low' }

  );

};

```

通过系统化的代码分割和懒加载策略，前端应用能够显著提升加载性能和用户体验。关键在于根据实际场景选择合适的优化方案，并持续监控和调整。建议从路由级别分割开始，逐步实施组件级优化，结合用户行为预测和网络感知加载，构建智能的资源加载体系。定期进行性能审计和优化调整，确保应用在不同设备和网络条件下都能提供良好的用户体验。