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

Question

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

use*_*888 5 javascript performance asynchronous cdn webpack

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

如何将外部 CDN 链接包含到 webpack 项目中

Webpack 和外部库

如何使用 webpack 在 js 文件中加载 CDN 或外部供应商 javascript lib，而不是在 html 文件中如何在 Webpack 中包含 jQuery CDN？

Webpack 外部文档

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

<script
  src="https://code.jquery.com/jquery-3.1.0.js"
  integrity="sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk="
  crossorigin="anonymous">
</script>

Run Code Online (Sandbox Code Playgroud)

如果您有一个或两个库，则此解决方案有效，但您应该如何使用 Webpack 中的外部组件通过 CDN 异步加载 10 个库（为了参数）（以最大化页面加载性能）？

我目前解决这个问题的方法是在我的 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>

Run Code Online (Sandbox Code Playgroud)

虽然我确信有一种“hack-ey”方式来实现我的目标（我愿意看到），但我的问题是我是否可以通过官方支持的方法（例如通过外部）完成上述任务。如果不是，鉴于 CDN 几乎总是可以提高页面加载性能，大多数 Web 开发世界如何使用库？

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

编辑 2：这个问题是使用关于 Webpack 和 Web 开发如何工作的错误假设提出的。结论是，如果你使用 Webpack，你不应该像我那样自由地使用 CDN。有关说明，请参阅评论部分。

Answer 1

小智 0

我的简单解决方案是将所有这些脚本标记粘贴到名为 \xe2\x80\x9ccdn-libraries.php\xe2\x80\x9d 的单独文件中。在 /body 之后，无需粘贴一长串脚本，只需进行一次调用，输入：

\n

///...</body>\n<?php require \xe2\x80\x98cdn-libraries.php\xe2\x80\x98 ?>\n<!--consider the correct path to your cdn-libraries file.-->\n

Run Code Online (Sandbox Code Playgroud)\n

当然，文件必须保存为 php，而不是 html。

\n

归档时间：	7 年，10 月前
查看次数：	2641 次
最近记录：	7 年，10 月前