处理包含许多脚本文件的页面

Dealing with pages with many script files

本文关键字：文件 脚本 包含许 处理      更新时间：2023-09-26

我们的项目包含许多页面，其中最多有20个选项卡，每个选项卡都使用不同的脚本。所有脚本文件都在 <head> 中引用，并在第一次页面加载时加载。现在我们遇到了性能问题，因为打开页面时加载的脚本太多（每个选项卡大约 2k 行 JavaScript）。问题是在许多情况下，用户需要使用 2-3 个选项卡，结果超过 60% 的代码被不使用。因此，我们需要任何脚本延迟加载解决方案来简化页面。由于每个选项卡的 HTML 都是按需加载的，我们可以在每个选项卡中放置<script>引用，这将提供一个良好的工作解决方案。但我确信包括不在<head>中的引用是一种糟糕的风格。
所以我想知道，还有其他解决方案吗？在像我们这样的大项目中，这些问题是如何解决的？任何建议都会有所帮助。
提前感谢！

jQuery对于这个解决方案有一个很好的函数：

$.getScript("my_lovely_script.js", function(){

   alert("Script loaded and executed.");
   // here you can use anything you defined in the loaded script
});

默认情况下，这不会缓存。我在jQuery网站上寻找了一个解决方案，它指出这个解决方案用于缓存脚本包括。

jQuery.cachedScript = function(url, options) {
  // allow user to set any option except for dataType, cache, and url
  options = $.extend(options || {}, {
    dataType: "script",   //Note this
    cache: true,          //Enable caching
    url: url
  });
  // Use $.ajax() since it is more flexible than $.getScript
  // Return the jqXHR object so we can chain callbacks
  return jQuery.ajax(options);
};
// Usage
$.cachedScript("URL HERE").done(function(script, textStatus) {
  console.log( textStatus );
});
相关文章：