javascript - 异步捆绑

Question

关闭。这个问题需要多问 focused 。目前不接受答案。

---

想要改进此问题吗？更新问题，使其仅关注一个问题 editing this post .

已关闭 5 年前。

Improve this question

我正在研究页面加载性能 - 主要关注 JavaScript。我的问题是关于异步特定的“ bundle ”。我有一些 JS 模块，理论上可以异步加载，但是，我不太知道组织同步和异步包的最佳方法，以及如何正确定义依赖项。我指的是也称为“延迟加载”的模式。

例如，我有一个预先输入模块来获取数据 getItems然后当用户在输入字段中输入内容时向他们提供建议。当用户键入不与任何数据匹配的输入时handleNoResults被调用时，它返回一条消息“无法匹配输入”。此消息需要翻译成各种语言，具体取决于当前设置的区域设置。

我不想加载整个 JS 翻译脚本，它允许我翻译文本，直到有必要为止，因为它是一个相当大的文件并且确实会影响性能 - 我想在实际需要时加载它 - 即当用户最初单击输入字段时，就可以获取它。

typeahead.js - 伪示例

export default function Typeahead(element) {
  init.call(this);

  function init() {
    var input = element.getElementsByTagName('input')[0];
    if (input) {
      getItems.call(this);
    }
  }

  function getItems() {
    $.get('/search_answers.json', function (result) {
      items = result;
    });
  }

  function handleNoResults() {
    return I18n.t('js.typeahead_no_results');
  }
}

任何有关管理此类解决方案的 es6 模式的建议或方向将不胜感激。

谢谢

Answer 1

JavaScript 本身没有包的概念。原生 ES 模块(在实现它们的浏览器中)可以使用 import() 动态(也可以异步)加载，即 stage 3 proposal并且有limited support in browsers .

您应该使用您选择的打包解决方案(例如 Webpack)来解决此问题。它具有 code splitting 的高级功能并且还支持import() .