时间戳

首页 > 解决方案 > 加载动态 JavaScript 包的最佳方式

javascript - 加载动态 JavaScript 包的最佳方式

问题描述

动态加载 JavaScript 代码时，至少有两种可能的方法。

一种方法是使用/将代码加载为字符串，然后使用 / 执行XHR它。FetchevalFunction

Webpack 动态导入实际使用的另一种方法是将一个<script>元素插入到文档中，并将包的代码包装到 JSONP 回调函数中。这样，浏览器会自动加载和编译代码，并调用包装函数通知加载的代码已准备好执行。

GoogleChromeLabs在动态导入polyfill中实现了另一种方法。他们正在创建一个脚本元素并传递动态生成的代码以使用 blob src 加载请求的文件：

const moduleBlob = new Blob([
  `import * as m from '${absURL}';`,
  `${importFunctionName}.moduleMap['${absURL}']=m;`,
], {type: 'text/javascript'});

但是，它需要对某些 ​​ESM 功能的基本支持（在 IE 11 等旧版浏览器中不可用），并且需要在存在时正确配置CSP 。

/方法看起来更方便，因为它更简单并且允许以任何通用格式加载模块，例如 CommonJS eval/ FunctionAMD，并且它不需要存在专有的包装函数。

这些方法之间的主要区别是什么？哪种方法更好？以及为什么 Webpack 和 Google 决定不使用eval/Function方法？

标签： javascriptwebpacklazy-loadingdynamic-loadingdynamic-import

解决方案

推荐阅读