您现在的位置是:主页 > Web前端技术 > Web前端技术

如何优化Vue js应用程序的性能开发技术

IDCBT2021-12-29服务器技术人已围观

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

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

一、介绍

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

二、为什么我们需要 Vue JS 性能优化?

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

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

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

三、Vue 性能不佳背后的主要原因

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

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

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

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

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

    不明智地使用第三方库

    忽略代码分割和惰性加载

    对 API 请求的不必要的点击

    未正确构建 JS 和 CSS 文件

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

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

    1. 生成报告

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

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

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

    然后执行此 。

    npm run build-report

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

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

    2. 运行命令和npm 运行生成

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

    标签:

    很赞哦! ()

本栏推荐