Javascript 如何通过CDN在Webpack中异步包含外部库_Javascript_Performance_Asynchronous_Webpack_Cdn

Javascript 如何通过CDN在Webpack中异步包含外部库

javascript performance asynchronous webpack

Javascript 如何通过CDN在Webpack中异步包含外部库,javascript,performance,asynchronous,webpack,cdn,Javascript,Performance,Asynchronous,Webpack,Cdn,在发布此问题之前，我咨询了以下主题：基于以上所有内容，似乎为了通过CDN加载第三方库，标准方法是使用webpack externals，它在index.html文件中生成以下脚本标记（每个webpack文档）如果您有一个或两个库，此解决方案可以工作，那么您应该如何通过CDN异步加载10个库（为了参数起见）（以最大限度地提高页面加载性能），使用Webpack中的External？我目前对此问题的解决方案是在index.html文件中手动包含以下脚本标记，以及相关的“async”

在发布此问题之前，我咨询了以下主题：

基于以上所有内容，似乎为了通过CDN加载第三方库，标准方法是使用webpack externals，它在index.html文件中生成以下脚本标记（每个webpack文档）

如果您有一个或两个库，此解决方案可以工作，那么您应该如何通过CDN异步加载10个库（为了参数起见）（以最大限度地提高页面加载性能），使用Webpack中的External？

我目前对此问题的解决方案是在index.html文件中手动包含以下脚本标记，以及相关的“async”和“defer”标记；但是，每当我包含一个新的库时，我都需要更新我的dist文件夹中的index.html文件，这使我相信我做得完全错误。下面是我的index.html文件当前的样子，它也被复制到dist文件夹中

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>App</title>
        <link rel="stylesheet" href="https://afeld.github.io/emoji-css/emoji.css">
    </head>

    <body>
        <div id="app"></div>
    </body>

    <script src="https://cdn.jsdelivr.net/npm/moment@2.20.1/moment.min.js" async defer></script>
    <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.4/lodash.min.js" async defer></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjs/4.0.0/math.min.js" async defer></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js" async defer></script>
    <script src="https://widget.cloudinary.com/global/all.js" async defer></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js" async defer></script>
    <script src="/dist/build.js" async defer></script>
</html>


应用程序

虽然我确信有一种“黑客”方式可以实现我的目标（我很乐意看到），但我的问题是我是否可以通过官方支持的方法（比如通过外部手段）实现上述目标。如果没有，那么鉴于CDN几乎总能提高页面加载性能，大多数web开发世界是如何使用库的？

编辑：在某些情况下，我使用Webpack是因为我使用vue loader构建我的VueJS SPA（作为一个学习项目）

编辑2:这个问题的提出使用了关于Webpack和web开发工作原理的错误假设。结论是，如果你在使用Webpack，你不应该像我一样自由地使用CDN。请参阅评论部分以获得澄清。

您是否尝试使用然后添加包含所有所需外部内容的模板？除此之外，您提供的链接提供了很大的帮助。如果你使用cdn这么多（如果不是全部的话），为什么你需要webpack？谢谢你的链接！我会调查一下，看它是否符合我的需要。我之所以使用Webpack是因为我在vue SPA中使用vue loader。真正的问题仍然是为什么要这样做，因为您的捆绑包应该是稳定的，而不是“依赖于某个CDN决定提供给您的任何内容”。如果您有依赖项，请安装这些依赖项，并将其绑定到一个非常特定的版本，然后绑定这些依赖项，以便您的绑定是确定性的，而不是“依赖于互联网决定给您的内容”（包括可能有毒的源代码）@Mike'Pomax'Kamermans我明白您在这里所说的。。。由于上面列出的原因，我猜大多数严肃的项目都是通过webpack而不是CDN来使用库的？更多的是“任何普通的webpack包”，而不是“严肃的项目”。如果您使用webpack，不要引入CDN服务的库，只需npm安装它们的等价物，并让您的代码需要它们。如果您绝对希望依赖CDN代码来处理某些依赖项，那么只需告诉webpack要将哪些名称视为，并将它们作为全部加载到您正在加载包的任何页面上即可。

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>App</title>
        <link rel="stylesheet" href="https://afeld.github.io/emoji-css/emoji.css">
    </head>

    <body>
        <div id="app"></div>
    </body>

    <script src="https://cdn.jsdelivr.net/npm/moment@2.20.1/moment.min.js" async defer></script>
    <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.4/lodash.min.js" async defer></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjs/4.0.0/math.min.js" async defer></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js" async defer></script>
    <script src="https://widget.cloudinary.com/global/all.js" async defer></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js" async defer></script>
    <script src="/dist/build.js" async defer></script>
</html>