快捷導(dǎo)航

JavaScript實(shí)現(xiàn)模塊懶加載的幾種方式

更新時(shí)間：2025年08月05日 08:26:43 作者：ze_juejin

JavaScript 中的模塊懶加載是一種優(yōu)化加載性能的技術(shù),其核心思想是將某些模塊的加載延遲到實(shí)際需要時(shí)才進(jìn)行,而不是在應(yīng)用初始化階段一次性加載所有模塊,本文給大家總結(jié)了JavaScript實(shí)現(xiàn)模塊懶加載的幾種方式,需要的朋友可以參考下

1. 原生 ES 模塊動(dòng)態(tài)導(dǎo)入 (推薦)

ES2020 引入的動(dòng)態(tài) import() 語法是目前最標(biāo)準(zhǔn)的懶加載方式：

// 按需加載模塊
button.addEventListener('click', async () => {
  const module = await import('./module.js');
  module.doSomething();
});

特點(diǎn)：

返回 Promise
瀏覽器原生支持
與打包工具(Webpack/Rollup)完美配合
支持代碼分割(code splitting)

2. Webpack 的 require.ensure (舊版)

Webpack 特有的異步加載方式(現(xiàn)在已被動(dòng)態(tài)導(dǎo)入取代)：

// Webpack特有的語法
button.addEventListener('click', () => {
  require.ensure([], function(require) {
    const module = require('./module');
    module.doSomething();
  }, 'my-chunk-name');
});

3. 動(dòng)態(tài) script 標(biāo)簽插入

傳統(tǒng)方式，適用于非模塊化腳本：

function loadScript(src, callback) {
  const script = document.createElement('script');
  script.src = src;
  script.onload = () => callback();
  document.head.appendChild(script);
}

// 使用
button.addEventListener('click', () => {
  loadScript('module.js', () => {
    // 模塊加載完成后執(zhí)行
    window.myModule.doSomething();
  });
});

4. AMD (RequireJS) 方式

異步模塊定義規(guī)范：

// 定義模塊
define('myModule', ['dependency'], function(dependency) {
  return {
    doSomething: function() { /*...*/ }
  };
});

// 加載模塊
require(['myModule'], function(myModule) {
  myModule.doSomething();
});

5. 懶加載 React/Vue 組件

React 懶加載

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

const LazyComponent = lazy(() => import('./LazyComponent'));

function MyComponent() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <LazyComponent />
    </Suspense>
  );
}

Vue 懶加載

const LazyComponent = () => import('./LazyComponent.vue');

new Vue({
  components: {
    LazyComponent
  }
});

6. 高級(jí)用法：預(yù)加載 + 懶加載

結(jié)合預(yù)加載提示優(yōu)化用戶體驗(yàn)：

// 在空閑時(shí)預(yù)加載
const preloadLink = document.createElement('link');
preloadLink.rel = 'preload';
preloadLink.as = 'script';
preloadLink.href = 'module.js';
document.head.appendChild(preloadLink);

// 實(shí)際使用時(shí)直接執(zhí)行
button.addEventListener('click', async () => {
  const module = await import('./module.js');
  module.doSomething();
});

7. 性能優(yōu)化技巧

代碼分割：合理劃分懶加載模塊邊界
預(yù)加載：使用 <link rel="preload"> 或 webpackPrefetch
加載狀態(tài)：顯示加載指示器提升用戶體驗(yàn)
錯(cuò)誤處理：捕獲加載失敗情況

import('./module.js')
  .then(module => { /*...*/ })
  .catch(err => { /* 處理錯(cuò)誤 */ });

命名chunk：方便調(diào)試和長(zhǎng)期緩存

import(/* webpackChunkName: "my-chunk" */ './module.js')

實(shí)際應(yīng)用示例

// 懶加載圖片
const lazyImages = document.querySelectorAll('img[data-src]');

const imageObserver = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      imageObserver.unobserve(img);
    }
  });
});

lazyImages.forEach(img => imageObserver.observe(img));

// 懶加載功能模塊
const loadAnalytics = () => import('./analytics')
  .then(module => module.init())
  .catch(() => console.log('Analytics failed to load'));

window.addEventListener('scroll', () => {
  if (window.scrollY > 1000) {
    loadAnalytics();
    window.removeEventListener('scroll', loadAnalytics);
  }
});