学会JavaScript动态加载，让你的网站更快更好用

你有没有遇到过这样的情况？打开一个网站，等了很久页面才完全显示出来，其实你只是想用其中一个简单的功能。这种感觉很不好。

传统做法是把所有代码一次性全部加载。不管用户需要什么，都先全部下载下来。这样做很浪费。动态加载的做法不一样，它只加载当前需要的代码，其他代码等到真正需要的时候再去获取。

什么是动态加载？

简单来说，就是什么时候需要什么代码，就什么时候去加载。不需要的代码先不加载。

为什么要用动态加载？

让网站打开更快

一次性加载所有JavaScript文件会让页面变得很慢。用户需要等待很长时间才能开始使用。动态加载让用户能更快看到页面内容，特别是那些对速度要求高的网站。

节省流量

不是每个用户都会用到网站的所有功能。加载用不到的代码就是在浪费流量。对于使用手机上网的用户来说，这点特别重要。

代码更好管理

代码可以按照功能分成不同的模块。每个模块可以独立加载。这样的代码结构更清楚，以后修改和维护也更容易。

怎么实现动态加载？

用script标签加载
这是最基本的方法，通过JavaScript创建script标签然后添加到页面里。

function loadScript(url) {
  const script = document.createElement('script');
  script.src = url;
  document.head.appendChild(script);
}

// 使用方法
loadScript('https://example.com/myscript.js');

这种方法的优点是简单，各种浏览器都支持。缺点是不能很好地处理代码之间的依赖关系，出错时也不容易处理。

用ES6模块的动态导入
这是现在推荐使用的方式，用起来很方便。

// 静态导入
import { myFunction } from './myModule.js';

// 动态导入
import('./myModule.js')
  .then(module => {
    module.myFunction();
  })
  .catch(error => {
    console.error('加载失败:', error);
  });

动态导入会返回一个Promise对象，可以用then和catch处理成功和失败的情况。代码会自动分割，不需要额外配置。

用webpack的require.ensure
如果你的项目使用Webpack打包工具，可以用这个方法。

require.ensure(['./moduleA'], function(require) {
  const moduleA = require('./moduleA');
  moduleA.doSomething();
});

实际使用场景

按路由分割代码

在vue和react这些前端框架中，可以按照不同页面来分割代码。

// React例子
const Home = lazy(() => import('./components/Home'));
const About = lazy(() => import('./components/About'));

function App() {
  return (
    <Suspense fallback={<div>加载中...</div>}>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </Suspense>
  );
}

功能模块的按需加载

有些功能用户可能不会用到，可以等用户点击时再加载。

// 点击按钮才加载编辑器
document.getElementById('editBtn').addEventListener('click', () => {
  import('./richTextEditor.js')
    .then(editor => {
      editor.init();
    });
});

第三方库的动态加载

一些比较大的第三方库可以等到需要时再加载。

// 需要显示图表时再加载
function showChart() {
  import('echarts').then(echarts => {
    const chart = echarts.init(document.getElementById('chart'));
    chart.setOption({/* 配置选项 */});
  });
}

提升效果的小技巧

提前加载重要资源

对可能很快要用到的资源，可以提前加载。

<link rel="preload" href="important-module.js" as="script">

选择合适的加载时机

根据用户行为决定什么时候加载：

鼠标移动到按钮上时，提前加载相关功能
页面空闲时加载可能用到的模块
切换页面前提早加载下个页面的代码

使用缓存

避免重复加载相同的代码。

// 缓存已加载的模块
const loadedModules = new Map();

function loadModule(moduleName) {
  if (loadedModules.has(moduleName)) {
    return Promise.resolve(loadedModules.get(moduleName));
  }
  
  return import(`./${moduleName}.js`)
    .then(module => {
      loadedModules.set(moduleName, module);
      return module;
    });
}

常见问题和解决方法

处理代码依赖

多个模块之间有依赖关系时，要确保它们按正确顺序加载。

// 同时加载多个相互依赖的模块
Promise.all([
  import('./moduleA.js'),
  import('./moduleB.js')
]).then(([moduleA, moduleB]) => {
  // 两个模块都加载完成后执行
  moduleA.init(moduleB);
});

处理加载失败

网络问题可能导致加载失败，需要有应对措施。

async function loadComponent(componentPath) {
  try {
    const component = await import(componentPath);
    return component;
  } catch (error) {
    console.error(`加载组件失败: ${componentPath}`, error);
    // 显示错误提示
    showErrorMessage();
  }
}

显示加载状态

让用户知道正在加载中。

function loadWithFeedback(url) {
  showLoading();
  
  return import(url)
    .then(module => {
      hideLoading();
      return module;
    })
    .catch(error => {
      hideLoading();
      showError();
      throw error;
    });
}

浏览器兼容性

动态导入是较新的功能，支持情况如下：

Chrome 61以上
Firefox 60以上
Safari 11以上
Edge 79以上

对于不支持的浏览器，可以使用babel转译代码，或者用前面提到的script标签方法。

function dynamicImport(url) {
  if (typeof import === 'function') {
    return import(url);
  }
  
  // 不支持时的备用方案
  return new Promise((resolve, reject) => {
    const script = document.createElement('script');
    script.src = url;
    script.onload = resolve;
    script.onerror = reject;
    document.head.appendChild(script);
  });
}

总结

动态加载能让你的网站更快、更省流量、用户体验更好。虽然开始用的时候可能需要适应一下，但带来的好处是很明显的。特别是对于功能复杂的网站，效果更加显著。

开始使用动态加载吧，你的用户会感谢你的。从小的功能开始尝试，慢慢应用到整个项目，你会发现网站性能有了明显的提升。

本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！

链接: https://fly63.com/article/detial/13086