JavaScript 如何动态导入

你有没有过这样的经历：打开一个常用的外卖APP，刚进首页时只加载了基础的界面，等你点进“我的订单”“会员中心”这些功能入口时，才慢慢加载对应页面的内容？这种“用的时候才加载”的操作，就是今天要讲的动态导入。可能你会问，为什么不一开始就把所有内容都加载好？毕竟，先加载多余的内容，就像你出门带了一堆从来不用的杂物，既占地方又费时间。而JavaScript里的动态导入，就是专门帮你解决这个问题的工具。

什么是动态导入？

简单来说，动态导入就是“按需加载代码”——平时把代码分成一个个小模块，只有当用户需要用到某个模块时，才把它“拿出来”用。举个生活化的例子：你平时在家做饭，不会把所有食材都提前切好摆出来，而是等炒菜时才切青菜、切肉，这样既不会浪费食材，也不会让厨房显得乱糟糟。动态导入就像“等用到再拿食材”，而普通的导入方式，就是“提前把所有食材都切好摆好”。

以前我们用JavaScript导入模块，都是直接写“import 变量 from '模块路径'”，这种方式会在页面加载时就把所有模块都加载进来，不管用户会不会用到。而动态导入用的是另一种语法——import()，它就像一个“请求工具”，需要用某个模块时，再向服务器发起请求，拿到模块后再运行里面的代码。

动态导入怎么用？

用动态导入其实很简单，只需要把原来的静态导入改成动态的函数形式就行。我们用一个常见的场景来举例：假设你做了一个网站，有“计算BMI”和“单位转换”两个工具，用户可能只会用其中一个，所以没必要一开始就把两个工具的代码都加载完。

首先，我们把两个工具分别做成模块：比如bmi.js里写计算BMI的函数，unit.js里写单位转换的函数。这时候，原来的静态导入会是这样的：

`javascript

// 静态导入，页面加载时就会加载两个模块

import { calculateBMI } from './bmi.js';

import { convertUnit } from './unit.js';

`

如果用动态导入，就可以改成：当用户点击“计算BMI”按钮时，才加载bmi模块；点击“单位转换”按钮时，再加载unit模块：

`javascript

// 点击BMI按钮时才加载模块

document.querySelector('#bmi-btn').addEventListener('click', async () => {

// import()返回的是Promise，所以用await等待模块加载完成

const { calculateBMI } = await import('./bmi.js');

// 拿到函数后，就可以用了

const result = calculateBMI(身高, 体重);

console.log(result);

});

// 点击单位转换按钮时才加载模块

document.querySelector('#unit-btn').addEventListener('click', async () => {

const { convertUnit } = await import('./unit.js');

const result = convertUnit(100, '米', '公里');

console.log(result);

});

`

你看，这样就避免了不必要的加载，用户没用到的代码，就不会被加载，页面打开的速度自然就快了。

动态导入的小好处和注意点

动态导入最明显的好处就是“提速”——页面初始加载的文件变小了，打开速度就变快了，用户就不会因为等太久而关掉页面。另外，它还能让代码结构更清晰，把不同功能拆成模块，维护起来也更方便。

不过有两个小细节要注意：第一，import()返回的是Promise，所以要用async/await或者then()来处理，不能直接当成普通的导入；第二，动态导入的路径要写对，不能用变量拼接成路径后再导入——比如const moduleName = 'bmi'; import(./${moduleName}.js)这种写法，目前大部分浏览器还不支持，容易出错。

总的来说，动态导入就是JavaScript给开发者的一个“小妙招”，能帮我们把代码拆得更灵活，让用户用得更顺畅。下次你做项目时，不妨试试用动态导入，让那些平时用不到的代码“躺平”，只在需要的时候再“出来干活”。