Dynamic Imports

2024年11月17日

柏拉文

越努力，越幸运

一、认识

---

Dynamic Imports （动态导入）: 使用动态导入 (import())，将代码分割为按需加载的模块。这种方式适用于路由级别的分割和按需加载。

二、配置

---

当涉及到动态代码拆分时，Webpack 提供了两个类似的技术。对于动态导入

2.1 import()

使用符合ECMAScript提案的 import() 语法（优先选择）: 以入口文件index.js 引入 lodash.js第三方模块、util.js 本地模块为例:

(async function () {
  const {
    default: { concat },
  } = await import(/* webpackChunkName: "lodash" */ "lodash");
  console.log(concat);

  const { foo1 } = await import(/* webpackChunkName: "util" */ "./utils");
  foo1();
})();

2.2 require.ensure

使用webpack特定的require.ensure