李钟意讲前端

外观

咨询/接单/付费bug修复/学习交流群

什么是 CDN 以及如何在 webpack、vite 中使用 ​

什么是 CDN ​

CDN 是 Content Delivery Network 的缩写，中文名为内容分发网络。它是一种分布式的网络架构，由一组服务器和网络设备构成，用于在全球范围内快速传输 Internet 上的内容。

CDN 的主要功能是将网站或应用程序的静态和动态内容（如 HTML 页面、CSS、JavaScript、图像、视频和音频文件）缓存到距离用户更近的边缘服务器上。当用户请求该内容时，CDN 会自动将内容从最近的服务器缓存中提供给用户，从而加快内容的传输速度并减少网络延迟。

通过使用 CDN，网站和应用程序的内容可以更快地加载，用户的体验可以得到改善，同时减轻了源服务器的负载压力。因此，CDN 被广泛用于高流量的网站、电子商务和在线游戏等互联网应用。

webpack5 如何配置 axios 和 dayjs 模块为我自己定一个的 cdn 链接 ​

要配置 webpack5 使用自定义 CDN 链接来加载 axios 和 dayjs 模块，您可以使用 webpack 的 externals 属性。externals 属性可以告诉 webpack 将某个模块视为外部依赖，从而不会将它打包进最终的 bundle 中，而是通过全局变量或其他方式在运行时加载。

以下是一个使用自定义 CDN 链接来加载 axios 和 dayjs 的示例 webpack.config.js 文件：

js
const path = require('path');

module.exports = {
  //...
  externals: {
    axios: 'axios', // 使用全局变量axios
    dayjs: 'dayjs' // 使用全局变量dayjs
  },
  //...
  plugins: [
    //...
  ]
  //...
};

在上面的配置中，我们告诉 webpack 将 axios 和 dayjs 视为外部依赖，并使用全局变量来加载它们。这意味着您需要确保在运行时在全局范围内存在这些模块的变量。

接下来，您需要在 HTML 文件中手动引入这些模块的 CDN 链接。例如，您可以在 HTML 文件的 head 标签中添加以下内容：

html
<head>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/dayjs/dayjs.min.js"></script>
</head>

这将在浏览器中加载 axios 和 dayjs 的 CDN 链接，并将它们添加到全局变量中。在您的应用程序中，您可以直接使用 axios 和 dayjs 变量，就像在没有使用 webpack 的情况下一样。

如果是 Vite 怎么做呢 ​

如果您使用的是 Vite，则可以使用 Vite 的 optimizeDeps 选项来配置 CDN 链接。optimizeDeps 选项允许您将模块视为外部依赖项，并在构建时使用 CDN 链接。

以下是一个使用自定义 CDN 链接来加载 axios 和 dayjs 的示例 vite.config.js 文件：

js
export default {
  //...
  optimizeDeps: {
    include: ['axios', 'dayjs'],
    exclude: ['vue'], // 也可以排除其他模块
    entries: {
      axios: 'https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js',
      dayjs: 'https://cdn.jsdelivr.net/npm/dayjs/dayjs.min.js'
    }
  },
  //...
  plugins: [
    //...
  ]
  //...
};

在上面的配置中，我们将 axios 和 dayjs 添加到 include 选项中，并使用 entries 选项为它们指定 CDN 链接。我们还可以使用 exclude 选项来排除其他模块，例如 vue。

Vite 将使用 CDN 链接来加载这些模块，并将它们添加到全局变量中。在您的应用程序中，您可以直接使用 axios 和 dayjs 变量，就像在没有使用 Vite 的情况下一样。