vue.js - vue安装组件，组件中包含了第三方请求地址导致加载很慢，如何处理？

Question

项目中使用了vditor组件。
组件无法正常加载（显示）或者无法及时加载的问题，使用浏览器无痕模式，打开使用了 vditor 组件的页面，发现输入框大概需要3-5s才能正常显示，于是f12查看了一下请求，发现vditor请求地址包含了“unpkg.com”的好几个相关请求，并且有些差不多2s了，请问下，如何把这些包放到本地？

Answer 1

https://github.com/Vanessa219/vditor/issues/1561

Answer 2

处理 Vue 项目中第三方库（如 vditor）加载慢的问题，通常可以通过将第三方库及其依赖的资源下载到本地并修改项目的配置来优化加载速度。以下是一些步骤和建议，用于将 vditor 及其依赖的资源下载到本地并集成到你的 Vue 项目中：

1. 下载 vditor 及其依赖

首先，你需要从 unpkg.com 或其他 CDN 服务上下载 vditor 的完整包及其所有依赖。你可以通过访问 vditor 的 GitHub 仓库或使用 npm/yarn 来获取这些资源。

• 使用 npm/yarn 安装：

  npm install vditor --save
  # 或者
  yarn add vditor

  这种方式会自动处理依赖，并将文件下载到你的 node_modules 目录中。

• 手动下载：
  如果出于某些原因需要手动下载，可以访问 vditor 的 GitHub 仓库 或使用 CDN 链接的页面，找到下载链接并手动下载。

2. 将资源集成到项目中

• 如果你使用的是 npm/yarn 安装：
  你可以直接在你的 Vue 组件中通过 import 语句引入 vditor。Webpack 或其他模块打包器会处理依赖关系，并在构建过程中将必要的文件打包进你的项目中。

  import Vditor from 'vditor'
  // 或者使用具体的模块，如编辑器、预览器等
  import 'vditor/dist/index.css' // 引入样式

• 如果你手动下载了资源：
  你需要将下载的文件放置在你的项目中，比如 public 或 assets 文件夹下，然后在你的 Vue 组件中通过相对路径引入这些资源。

  <!-- 在你的 Vue 组件中 -->
  <link rel="stylesheet" href="@/assets/vditor/index.css">
  <script src="@/assets/vditor/vditor.min.js"></script>

3. 修改 webpack 配置（如果需要）

如果你使用的是 webpack，并且希望进一步控制资源加载（如使用别名、代码分割等），你可能需要修改 vue.config.js 或 webpack 的配置文件。但通常，如果你只是简单地通过 npm/yarn 安装并引入 vditor，webpack 会自动处理大部分事情。

4. 缓存和 CDN

虽然你已经决定将资源下载到本地，但请注意，CDN 在全球范围内分发资源时通常能提供更快的加载速度。如果你发现本地加载速度仍然较慢，可以考虑使用更靠近你用户群体的 CDN 服务，或者在你的服务器上设置缓存策略。

5. 性能测试

在进行了上述更改后，使用浏览器的开发者工具进行性能测试，以确保你的更改确实提高了加载速度。注意检查网络请求的时间、加载顺序等。

通过这些步骤，你应该能够有效地解决 Vue 项目中因第三方库加载慢而导致的问题。