vue项目中的性能优化,前端vue优化性能
本文主要介绍VueJS的应用性能优化分析和解决方案。Vue.js是开发网站最流行、最稳定的JavaScript框架，但和其他框架一样，如果忽略它，性能会受到影响。让我们来看看如何提高性能。
一.导言
二、为什么需要Vue JS性能优化？
三、Vue表现不佳背后的主要原因
1.生成报告2。运行命令和npm以生成4。如何优化Vue js应用的性能？
1.Vue js中的延迟加载
2.基于路由的代码拆分
3.Vue js预加载组件
4.优化第三方库
5.使用浏览器缓存
6.优化和压缩图像
前言：
假设我们正在非常努力地开发整个Vue应用程序。js。但是它的性能没有得到优先考虑：现在，我们的应用程序需要一段时间来加载、导航、提交或执行任何用户操作。是应该认为用户想要这样延迟的体验，还是更愿意在Vue js应用上停留更长时间？
可悲的是，答案是否定的，据统计，已经证明53%的用户不会选择在这些加载时间超过3秒的应用上花费时间。构建一个具有优化性能的应用程序将平滑用户体验，并逐渐增加用户交互。
不幸的是，大多数开发人员并不了解性能的重要性，最终构建了大量存在性能问题的应用程序。我不认为你想成为这些开发者中的一员。开发应用程序具有挑战性，但开发性能优化的应用程序更具挑战性。为了减轻你的挑战，我提出了这篇关于vuejs性能优化的博客，它将帮助你了解如何优化你的Vue.js应用程序的结构，以及如何管理vue js性能。
目录
VueJS是开发网站最流行和最稳定的JavaScript框架，但是和其他框架一样，如果忽略它，性能会受到影响。
如果你正在寻找可靠的vue js性能优化技巧或者只是想知道你的大规模应用的vue最佳实践，你已经选择了正确的博客。不再赘述，下面详细讨论一下如何优化Vue js应用的性能。
首先，了解Vue js应用架构非常重要。知道了它的重要性，我们才能意识到它有多重要，我们才会开始更认真地对待它。那么，我们来看看为什么需要优化你的大型应用。请记住，任何应用程序的优化都是必不可少的，但正如本博客所关注的，我们将讨论vue性能优化。
一、介绍
没有一个程序员希望，即使编码了几千行，用户也不想在应用上花时间，因为执行用户操作是需要时间的。
全世界的产品负责人为用户开发产品，用户主要关心的是他们的流畅交互。如果程序员对Vue js的性能、速度和效率不满意，这与最终用户投入了多少精力在Vue JS应用架构上无关。
所以，是的，这就是为什么它成为优化性能的强制性标准，最终将满足最终用户的需求。
二、为什么我们需要 Vue JS 性能优化？
我们先来看看Vue js是如何运作的，以及Vue js表现不佳背后的重要原因。
降低Vue性能的原因取决于你的Vue js应用结构。
例如：VueJS单页应用(SAS)性能差的一个重要原因可能是和处理服务器端渲染(SSR)的VueJS项目不同。
任何开发人员都可以考虑应用程序是SPA还是SSR的主要原因是捆绑包的大小。包越大，Vue js的性能越慢。因此，我们可以得出结论，包的大小与应用程序的性能成反比。
Vue js大应用背后的一些常见原因-
不明智地使用第三方库
忽略代码分区和延迟加载。
对API请求不必要的点击
JS和CSS文件构建不正确
在讨论如何减小捆绑包大小之前，我们先来看看如何检查Vue js和Vue js企业应用的捆绑包大小。
如何检查你的VueJS app的大小？
我将向您展示两种方法来检查Vue js应用程序的大小。
三、Vue 性能不佳背后的主要原因
生成的报告可以直观地描述所使用的各种包的大小。此外，您还可以了解如何替换任何比预期空间大的包。您可以使用生成报告命令来生成应用程序报告。记住，这个命令将构建一个安装了webpack-bundle-analyzer的应用程序的报告。
运行上面的命令后，json这个package.json文件并添加这个内容。
“构建-报告”:“vue-CLI-服务构建-报告”
然后执行这个。
npm运行构建-报告
完成所有这些后，将在dist文件夹中创建一个名为“report.html”的文件。
打开文件时会观察到这种情况。
Vue.js应用性能优化给你专业分析解决方案#yyds干货盘点# _vue
1. 生成报告
我们会看到这样的图像：
Vue.js应用性能优化给你专业分析解决方案#yyds干货盘点# _vue_02
现在，在找到包的大小后，要做的就是减少它。不再赘述，我们继续探讨Vue.js的应用性能优化方法。
2. 运行命令和npm 运行生成
这里有一些VueJS性能提示，您可以实现它们来优化Vue的性能。js应用。
四、如何优化 Vue js 应用程序的性能？
顾名思义，Vue js中的懒加载就是在应用中懒加载模块的方法，也就是在用户实际需要模块的时候。大多数时候，用户每次访问一个网站，并不需要加载JavaScript bundle中的所有模块。
有些组件有模式和工具提示，可以在需要时加载。如果你正在处理两个或三个模式或工具提示，你看不到结果。然而，假设你有一个广泛的Vue应用程序，有这么多的模式和工具提示；一次加载它们会降低你的性能。
每次页面加载时都加载整个包是不值得的。因此，它的加载有助于您划分包，并在使用它们时加载它们。这样，它通过不下载和解析不必要的代码来节省时间。
要检查网站中使用的实际 JavaScript 代码
单击开发工具
cmd移位p
类型覆盖范围
单击记录
红色高亮显示的网格是未使用的，可以懒于加载。通过延迟加载，您可以将包的大小减少60%。
这是关于我们应该安装组件和模块的惰性加载的大规模应用程序的内容和原因：让我们探索如何执行它。
我们可以用Webpack动态导入代替常规导入，将必须延迟加载的模块分开。
这就是您导入 JavaScript 文件时的输入方式，对吗？
//demo.js
常量演示={
testDemo: function () {
console.log(这只是一个演示！)
}
}
导出默认演示
//app.js
从导入演示。/demo.js
演示. testDemo()
它会将文件demo.js作为应用程序的node.js添加到它的依赖图中，并通过以这种方式导入它来将其捆绑在一起。因此，无论何时加载包，demo.js都会被加载，不管它需要什么。
但是，如果我们只想加载demo.js作为对某些用户操作的响应。在这种情况下，我们将实现动态导入，并告诉应用程序仅在需要时才下载该模块。
以下是对上述代码的修改，用于执行用于测试 Vue .js 应用程序的动态导入
//app.js
const getDemo=()=import(。/demo.js )
//稍后当一些用户动作任务被放置为命中路线时
getDemo()。然后({ testDemo }=testDemo())
所以，你可以注意到我公布了一个函数，它确实返回了导入函数，而不是直接导入演示模块。这就是我们所说的动态导入，所以Webpack会知道它必须把这个模块保存在一个单独的文件中。获取函数Demo()，包含动态导入和返回承诺。我们基本上是把节点(这里演示的)从依赖图中切掉，然后在需要的时候(比如路由改变或者点击)再下载。请记住，演示中导入的module.js也将从包中分离出来。
VUJS中的延迟加载是减少包大小和优化性能的最佳实践之一。养成习惯，知道哪些模块是你不需要的，除非有明确的用户动作，并懒洋洋地下载它们以获得更好的性能。
1. 在 Vue js 中懒加载
假设你要开发一个小型的VueJS网站，有两个网页——仪表盘和联系人。即使对于这两个页面，您也需要在您的项目中实现vue路由器。
路由文件可能如下所示-
//routing.js
从导入仪表板。/Dashboard.vue
从导入联系人。/Contact.vue
常量路由=[
{路径：“/”，组件：仪表板}
{路径：“/联系人，组件：联系人}
]
由于这种标准的编码方法，即使用户访问另一个页面(我们不想下载仪表板或联系人)，组件——仪表板和联系人(使用lodash)也会被下载。这是因为我们在同一个包中有两条路由。你可能会想，多下载两页有什么大不了的。然而，当您处理具有大量包的大型应用程序时，这是很重要的。
为了避免不必要的组件下载，我们将使用拆分代码。
为此，我们将对不同的路径使用不同的包，并且我们遵循动态导入的技术。
现在将通过动态路由，而不是直接导入组件。让我们看看如何实现这一点。
//routing.js
常量路由=[
{ path:“/”，component: ()=import(。/Dashboard.vue) }
{ path:“/contact，component: ()=import(。/Contact.vue) }
]
通过遵循这个实践，您可以将包的大小减少一半！但是要做到这一点，您需要确定哪些组件可以用于动态导入。相信我，这种vue js的做法会帮助你的应用更具可执行性。
2. 基于路线的代码拆分
我们继续深入研究一下，Vue js预加载组件是一种在用户请求页面之前下载资源的技术。例如，如果您确定大多数用户将从类别页面访问产品页面，您可以考虑预取产品页面。你需要记住，你只能在初始渲染后进行预抓取。预取的另一个优点是，它可以在不影响性能的情况下消除延迟加载导致的不良结果。
对于它的实现，您只需要添加link rel= pre-inserted href=" URL "/标记。很简单吧？但是，在处理Webpack时，情况就不一样了。Webpack根据模块的顺序生成包名。幸运的是，webpack包有神奇的注释，很容易预加载。神奇的评论是影响构建过程的评论。我们需要使用-/* webpackPrefetch: true */来预取模块。只需将它保存在您的动态导入中，如下所示。
组件：{
modal view:()=import(/* webpackPrefetch:true */。/modal view . vue’)
}
执行代码时，Webpack会搜索magic注释，并在头中添加链接rel= pre-inserted URL=" resource-URL "/。
link rel= prefetch href= path-to-chunk-with-modal-view rel= external no follow /
每当用户请求ModalView模块时，它将被预先控制并立即访问。
3.Vue js预加载组件
当您和我们查找包的大小并惊讶地发现它超过了理想值时，并不总是因为您的代码：很多时候，是因为使用了加载的第三方库。是的，我们都使用第三方库，却不知道它们对应用程序性能的影响。我们的代码可能只是包大小的一小部分。
您可以使用bundlephobia来理解不同的库如何影响性能。你只需要在这个精彩的网站上加上Vuejs库名，你就会收获很多与网站数据相关的知识。例如，我使用过lodash库。这是信息。
了解更多关于库及其对性能的影响不是很好吗？
如果你想知道哪些VueJS库对你的Vue js应用影响更大，那么你可以点击这里扫描你的软件包。此外，我定义了各种方法来分析包的大小。
在选择任何库之前，请向自己提出这些问题：
我为什么要使用图书馆？
我需要整个图书馆来达到我的目的吗？
我选择的库有什么影响？
我是否有一种性能友好的方式来使用该库？
来看看我选Vue库的时候是怎么处理的吧。
如果我的程序需要一些函数，我想安装lodash库。
但是，我知道lodash对性能的影响有多大，所以我不会导入整个库，我只导入函数，就像这样。
从“lodash/isEmpty”导入isEmpty
相信我，在不同的库中做这样的小改动，会有更显著更明显的影响。
到目前为止，我们已经讨论了VueJS大型应用程序的包大小以及相关的VueJS性能技巧。为了优化性能，减小包的大小并不是唯一的解决方案。需要复用一些资产，让用户不用等。下一步，让我们看看如何重用浏览器缓存。
4. 优化第三方库
我们已经就捆绑的大小进行了充分的讨论；最后一步，我们将重点关注缓存数据。
缓存是一种存储选择性数据的技术，可以在请求时快速访问这些数据。
将浏览器数据保存在内存缓存中，直到浏览器没有关闭。
可以观察到。
打开开发者工具并选择网络选项卡。访问任何网站，重新加载几次。你会注意到一些静态文件(比如CSS、图片、javascript和HTML)会有内存缓存，如下所示。这意味着这些文件将从内存缓存中传送。
因为浏览器自己处理缓存挺好的。你可能会想，我们可以添加什么？所以你只需要弄清楚VueJS应用结构中哪些部分相对于其他部分很少变化，这样我们就可以缓存这些部分了。
假设项目结构是这样的 -
主要的。[哈希]。js——项目的根组件
常见。[哈希]。js-项目的通用组件
仪表板。[哈希]。js-仪表板特定组件
接触。[哈希]。js-联系特定组件
我们关心的是共同的。我们可以在这里拥有所有的依赖项，它们不太可能频繁更改，我们可以进一步使用它来缓存数据。通过分离这些组件，用户可以节省时间。您可以访问此处，了解更多关于如何将依赖关系划分为不同部分的信息。
5. 使用浏览器缓存
对图片应用的包装尺寸影响很大。当应用程序渲染相当大的图片时，它实际上增加了应用程序的加载时间。你能做的就是优化你提供图片的方式。为此，您可以在本地压缩图像或使用cdn。让我们看看如何实现这一点-
•压缩本地图像
如果您的应用程序包含6到7个图像，则可以在本地提供。图像对文件大小有影响，因此有必要压缩图像以减小文件大小。以下是压缩图像的五大免费在线工具
Adobe Photoshop
自动收缩
图像压缩器
CompressNow
TinyPNG
•优化 CDN 图像
当您处理使用大量媒体的应用程序时，建议优化CDN上的图像。CDN提供了变换功能，可以将图片尺寸缩小到70%而不像素化，不影响UI。如果您的应用程序有12到15个图像，这种技术是最好的。你可以通过这些平台管理媒体-
图像套件
云雾缭绕
所以，这就是如何优化VueJS应用程序的性能。我希望你所有的问题和疑问都能通过这个博客得到解答。
结论：
无论开发多大的应用程序，都需要在某个时候进行优化。
关于Vue.js的应用性能优化分析的解决方案这篇文章到此为止，更多关于Vue.js的应用性能优化分析，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。