如何优化Vue js应用程序的性能 - 行业资讯 - 肥雀云

这篇文章主要为大家展示了“如何优化Vue js应用程序的性能”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“如何优化Vue js应用程序的性能”这篇文章吧。

VueJS 是开发网站最受欢迎、最稳定的 JavaScript 框架，但与其他框架一样，如果您忽略它，性能就会受到影响。

任何程序员都不希望，即使在编码了数千行之后，用户也不想花时间在应用程序上，因为执行用户操作需要花费时间。

世界各地的产品所有者为用户开发产品，这些用户主要关心的是其流畅的互动。如果程序员对 Vue js 的性能、速度和效率不满意，则与最终用户在 Vue JS 应用架构上投入了多少精力无关。

因此，是的，这就是为什么它成为强制性标准，以优化性能，最终将满足最终用户的需求。

让我们看看 Vue js 是如何工作的，以及 Vue js 性能不佳背后的重要原因。

降低 Vue 性能的原因取决于您的 Vue js 应用结构。

例如：Vue jS 单页应用程序（SAS）中性能不佳的重要原因之一可能与处理服务器侧渲染（SSR）的 VueJS 项目不同。

任何开发人员都能考虑应用程序是 SPA 还是具有 SSR 的主要原因是捆绑大小。捆绑尺寸越大，Vue js 性能越慢。因此，我们可以得出结论，捆绑大小与应用程序性能成反比。

Vue js 大应用程序背后的一些常见原因 -

在讨论如何减少捆绑大小之前，让我们看看如何检查 Vue js 和 Vue js 企业应用程序的捆绑大小的大小。

如何检查您的 VueJS 应用的大小？
我将向您展示两种方法来检查 Vue js 应用程序的大小。

生成报告可直观地描述所使用的各种包的大小。此外，您可以找出如何替换任何比预期空间更大的包。您可以使用命令生成报告生成应用程序报告。请记住，此命令将构建一个应用程序的报告，其中安装了 webpack-bundle-analyzer。

运行上述命令后，打开包.json 文件并添加此内容

"build-report": "vue-cli-service build --report"

然后执行此。

npm run build-report

执行所有这些之后，将在dist文件夹中创建一个名为 "报告.html的文件。
打开该文件时，将观察此

Vue.js 应用性能优化给你专业分析+解决方案#yyds干货盘点# _vue

我们会看到类似这样的图像：

Vue.js 应用性能优化给你专业分析+解决方案#yyds干货盘点# _vue_02

现在，在找到捆绑包大小后，斗争是减少它。无需进一步讨论，让我们继续探索 Vue .js应用性能优化的方法。

下面是一些 VueJS 性能提示，您可以实现以优化 Vue .js应用程序的性能。

根据名称，Vue js 中的懒加载是懒加载应用程序中的模块的方法，即当用户实际需要该模块时。大多数时候，每当用户访问网站时，无需加载 JavaScript 捆绑包中的所有模块。

有一些组件具有模式和工具尖，可在需要时加载。如果您正在处理两个或三个模态或工具尖，则看不到结果，但是，假设您有一个具有这么多模式和工具尖的广泛 Vue 应用程序;一次加载它们会降低您的性能。

它根本不值得每次页面加载时加载整个捆绑包。因此，它加载有助于您划分捆绑包并在使用时加载它们。这样，它通过不下载和解析不必要的代码来节省时间。

要检查网站中使用的实际 JavaScript 代码

带有红色高光的网格不使用，可以懒加载。通过利用懒加载，您可以将捆绑大小减少 60%。