我有一些库(如语义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代码请求的内容的下载位置。
如果我不清楚我说对不起,我在这里澄清你需要的一切!
从这个问题和你的other question,我认为你可能会误解CDN的目的。
在这个问题中,您说要复制CDN上托管的代码,将其统一到一个资源中,然后自己托管。那不是问题。但是,这样做的方法不是使用CDN托管文件,而是使用实际的库源并通过webpack,browserify或汇总等捆绑器构建自己的bundle。
这些捆绑包会在构建时将您遇到的问题考虑在内。静态资源可以相对正确生成,也可以内联添加到捆绑包中。
此外,在您的一条评论中,您说:
下载单个文件比下载10个不同库的10个单独JS文件要快。对于每个库,浏览器必须发起请求,域解析等。加入JS文件可以加快加载速度,并且在导入较少的JS文件时,PageSpeed Insights可以为您提供更好的分数
如果您必须实际下载资源,则确实如此。正如我在你提到的另一个问题上所提到的,CDN的目的是尝试制作它,这样你每次访问不同的网站时都不必下载图书馆的副本。相反,如果站点A和站点B都使用[email protected],并且都通过使用src
:<script src="http://some.cdn.com/[email protected]"></script>
的脚本来加载资源,那么您首先访问的站点将让您的用户加载脚本以及您的用户访问第二个站点时,浏览器会说,“我已经缓存了那个资源,我只会使用它”。
这为您的用户节省了网络调用,这意味着没有请求开销,只有浏览器意识到它已经拥有资源所需的开销。