Question

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

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

检查Chrome开发工具的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代码请求的内容下载位置。

如果不清楚，我对不起，我在这里是为了澄清您的需要！

Answer 1

从这个问题以及您的other question起，我认为您可能会误解CDN的目的。

在此问题中，您说要复制CDN上托管的代码，将其统一为一个资源，然后托管自己。那不是问题。但是，执行此操作的方法不是使用CDN托管文件，而是使用实际的库源并通过诸如webpack，browserify或汇总之类的捆绑器构建自己的捆绑软件。

这些捆绑器在构建时会考虑您现在遇到的问题。可以将静态资源正确地设置为相对资源，或者将其内联添加到捆绑软件中。

此外，在您的评论之一中，您说：

下载单个文件比下载10个文件要快用于10个不同库的JS文件。对于每个库，浏览器都有发起请求，域解析等。联接JS文件使其加载速度更快，而且PageSpeed Insights还可以为您提供更多帮助导入更少的JS文件时得分更高

如果必须实际下载资源，则为true。就像我在另一个问题上提到的那样，CDN的目的是尝试使之成为CDN，这样您就不必在每次访问其他网站时都下载图书馆的副本。相反，如果站点A 和站点B 都使用 somelib@2.0.0 ，并且都通过使用带有{{1 }}：src，无论您首先访问哪个站点，都会让您的用户加载脚本，并且只要您的用户访问第二个站点，浏览器就会说：“我已经缓存了该资源，我将使用它”

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

如何将两个以上的独立JS库合并到一个文件中

1 个答案: