如何在一个文件中加入两个以上分离的 JS 库答案

【问题标题】：How to join two+ separated JS libraries in a single file如何在一个文件中加入两个以上分离的 JS 库
【发布时间】：2018-08-31 18:25:13
【问题描述】：

我有一些库（如语义 ui、jquery...），我通常直接从 CDN 将它们分别加载到我的 <HEAD> 标签中，每个库都有自己的 <SCRIPT> 标签。

然后我尝试打开每个 JS 文件的内容，复制每个文件并将每个内容附加到本地单个空白 JS 文件中。然后我在我的项目中导入了这个文件。好的，它工作正常，控制台上没有错误。但是有些东西不起作用。

检查 Chrome Dev Tools 的 NETWORK 选项卡，我发现这些库还尝试动态下载许多 css/图像文件。浏览器会尝试从我的本地域而不是 CDN 下载这些资源 - 当然。所以我也必须将所有这些文件移动到我的本地服务器。

但我的问题是：无论如何我可以使用类似于BASE 标记的东西，但可以使用脚本吗？

例如，我的single.js 会是这样的：

base_download = 'cdnjs.cloudflare.com';
//HERE COMES THE CONTENT OF JQUERY LIBRARY
//...

base_download = 'cdn.jsdelivr.com';
//HERE COMES THE CONTENT OF SEMANTIC UI LIBRARY
//...

base_download = 'cdnjs.cloudflare.com';
//HERE COMES THE CONTENT OF THE ANIMATE JS LIBRARY
//...

这样浏览器就可以正确地知道每个js代码请求的内容去哪里下载了。

如果我不清楚，我说对不起，我在这里澄清你需要的任何东西！

【问题讨论】：

看这里：stackoverflow.com/q/950087/6588498
您认为加入这些文件会带来什么好处？我认为您可能正在尝试克服 CDN 实际上没有的问题。这些脚本是独立的并且每个都是单独的查询，这是一件好的事情。这对您的服务器来说不是问题，但对于 CDN 服务器来说是个问题，因为它正在为这些资源提供服务。
@zero298 下载单个文件比为 10 个不同的库下载 10 个单独的 JS 文件要快得多。对于每个库，浏览器必须发起请求、域解析等。加入 JS 文件可以使其加载速度更快，并且 PageSpeed Insights 在导入更少的 JS 文件时会为您提供更好的分数。
@Rohit Sharma 您所说的与我的问题无关！我想将所有文件合并在一起。

标签： javascript import cdn head

【解决方案1】：

从这个问题和您的other question，我认为您可能误解了 CDN 的目的。

在这个问题中，您说您想复制托管在 CDN 上的代码，将其统一到一个资源中，然后您自己托管该资源。那不是问题。但是，这样做的方法不是使用 CDN 托管的文件，而是使用实际的库源并通过 webpack、browserify 或 rollup 等捆绑器构建您自己的包。

这些打包程序在构建时会考虑您现在遇到的问题。静态资源要么正确设置为相对，要么内联添加到包中。

另外，在你的一个 cmets 中你说：

下载单个文件比下载 10 个文件要快得多用于 10 个不同库的 JS 文件。对于浏览器拥有的每个库发起请求、域解析等。加入 JS 文件让它加载得更快，PageSpeed Insights 也给你很多导入更少的JS文件时得分更高

如果您必须实际下载资源，这是正确的。正如我在您的另一个问题中提到的，CDN 的重点是尝试制作它，这样您就不必每次访问不同的网站时都下载库的副本。相反，如果 Site A 和 Site B 都使用 somelib@2.0.0，并且都使用带有 src 的脚本来加载资源：<script src="http://some.cdn.com/somelib@2.0.0"></script>，无论您首先访问哪个站点，都会让您的用户加载脚本，并且每当您的用户访问第二个站点时，浏览器都会说，“我已经缓存了该资源，我将使用它”。

这为您的用户节省了网络调用，这意味着没有请求开销，只有浏览器意识到它已经拥有资源所需的开销。

【讨论】：

谢谢，如果没有人找到将许多外部库导入到单个文件中并且仍然可以从 CDN 下载外部 css/图像的方法，我会接受您的回答。
我必须对你的回答有点不同意，因为 clouflare 本身使用 ROCKET LOADER 来完成我所说的，承诺更快的加载页面速度。我只是不明白他们如何处理本地统一文件加载的外部文件。
@amandanovaes 那么你应该阅读How does CloudFlare's Rocket Loader actually work (and how can a developer ensure compatibility)?，因为它是一个比仅仅将脚本连接在一起更复杂的过程。
感谢您的 cmets 和回答，非常清楚。事实上，如果用户已经在他的浏览器上缓存了一个库，那么我最好不要将这些库包含在一个文件中。无论如何，我只是好奇是否有一种简单的方法可以连接 JS/CSS 文件，看起来没有！