专栏首页前端知否Vue.js应用性能优化三

Vue.js应用性能优化三

在上一篇Vue.js应用性能优化二中,我们学习了足够强大的模式,可以显着提高应用程序的性能 - 按照路由分割代码。虽然按照路由拆分代码非常有用,但在用户访问我们的站点后,仍然有很多内部代码不需要。在本系列的这一部分中,我们将重点关注代码拆分我们的状态管理 - Vuex模块。

两种类型的Vuex模块

在我们进一步了解如何懒加载Vuex模块之前,您需要注意一件重要的事情。您需要了解注册Vuex模块的方法有哪些,以及它们的优缺点。

静态Vuex模块在Store初始化期间声明。以下是显式创建的静态模块的示例:

上面的代码将创建一个带有静态模块userAccountModule的新Vuex Store。静态模块不能取消注册(也不能延迟注册),并且在Store初始化后不能更改它们的结构(不是状态!)。

虽然这种限制对于大多数模块来说都不是问题,并且在一个地方声明,那么所有与数据相关的东西都可以保存在一个地方。但这种方法存在一些缺点。

假设我们的应用程序中有一个Admin Dashboard,它关联一个专用Vuex模块adminModule。

你可以想象这样的模块可能非常庞大。尽管仪表板将仅由一小部分用户和应用程序的受限区域(假设在/admin路径下)使用,由于静态Vuex模块的集中注册,它的所有代码都将在主程序包中。

这当然不是我们想要的结果。我们需要一种方法只在/admin路由中加载这个模块。您可能已经猜到静态模块无法满足我们的需求。所有静态模块都需要在创建Vuex Store时注册,因此以后无法注册。

这是动态模块可以帮助我们的地方!

在创建Vuex Store后,可以注册与静态模块相反的动态模块。这个简洁的功能意味着我们不需要在应用程序初始化时下载动态模块,并且可以将其打包在不同的代码块中,或者在需要时懒加载。

首先让我们看一下以前的代码使用动态注册管理模块之后的样子。

不是将adminModule对象直接传递到我们store的modules属性,而是在创建Store之后,使用registerModule方法注册它。

动态注册不需要在模块内部进行任何更改,因此可以静态或动态地注册任何Vuex模块。

当然,在目前的形式下,这个动态注册的模块并没有给我们任何好处。

适当的代码分割Vuex模块

现在我们知道如何动态注册管理模块,我们当然可以尝试将它的代码放入/admin route bundle。

让我们暂时停下来,简要了解我们正在使用的应用程序。

在router.js中,我们有两个懒加载的代码分割路由。使用我们上面看到的代码,我们的admin Vuex模块仍然在主app.js包中,因为它是store.js中的静态导入。

让我们解决这个问题,并将此模块仅交付给输入/admin路由的用户,以便其他人不会下载冗余代码。

为此,我们将在/admin路由组件中加载管理模块,而不是导入并注册它在store.js。

我们来看看发生了什么!

我们在Admin.vue(/admin route)mounted后,导入和注册admin Store。稍后在代码中,一旦用户退出管理面板,我们就会取消注册该模块,以防止同一模块的多次注册。

现在因为admin模块是在Admin.vue而不是store.js中导入的,所以它将与代码分割的Admin.vue打包在一起!

重要说明:如果您正在使用SSR模式,请确保在mounted钩子中注册模块。否则它可能导致内存泄漏,因为在服务器端没有beforeDestroy钩子。

现在我们知道如何动态注册Vuex模块,并将路由模块分发到适当的包中。下边让我们来看看稍微复杂一些的用例。

延迟加载Vuex模块

假设我们在Home.vue上有推荐部分,我们希望展示一些用户推荐评语。但是我们不想在用户进入我们的网站后立即显示它们。只有在用户需要时才能显示它们。我们可以添加“显示推荐”按钮,点击后会加载并显示其下方的推荐。

要存储推荐数据,我们还需要一个Vuex模块。我们称之为推荐模块。该模块将负责显示以前添加的推荐和添加新推荐。我们不需要了解实现细节。

我们希望只有用户点击按钮才去请求下载推荐模块代码,因为之前不需要它。让我们看看如何利用动态模块注册和动态导入来实现此功能。 Testimonials.vue是Home.vue中的一个组件。

当用户单击Show Testimonials按钮时,将调用getTestimonials()方法。它负责调用getTestimonialsModule()来获取testimonials.js。一旦promise resovled(这意味着加载了模块),我们就会动态注册它并调度负责获取推荐的动作action。

由于动态导入,testimonials.js内容被捆绑到一个单独的文件中,只有在调用getTestimonialsModule方法时才会下载该文件。

当我们需要退出管理面板时,在beforeDestroy生命周期钩子中取消注册模块,这样如果我们再次进入,就不会重复注册模块。

总结

即使静态Vuex模块注册对于大多数用例来说已足够,但在某些情况下我们可能希望使用动态注册。

如果只在特定路由上需要模块,那么我们可以在适当的路由组件中动态注册它,这样它就不会在主bundle中存在。

如果只是在一些交互之后才需要模块,那么我们需要以适当的方法,将动态注册模块动态导入和懒加载模块结合起来使用。

能够对Vuex模块进行代码分割,动态注册是一种强大的能力。我们在应用程序中处理的与数据相关的操作越多,就可以在bundle大小方面节省更多成本。

在本系列的下一部分中,我们将学习如何懒加载单个组件,更重要的是,应该懒加载哪些组件。

本文分享自微信公众号 - 前端知否(qianduanzhifou),作者:QETHAN

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-09-08

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Vue.js中的延迟加载和代码拆分

    虽然现在网络环境和电子设备变得越来越好,但是保持应用程序快速加载变得越来越困难。在本系列中,我将深入研究我们在实践中使用的Vue性能优化技术,并且您可以在Vue...

    前端知否
  • 彻底搞懂RxJS中的Subjects

    每周大约有1700万次npm下载,RxJS在JavaScript世界中非常受欢迎。如果您是Angular开发人员,则不会错过RxJS Observables,但...

    前端知否
  • 构建相同的组件Vue3 vs Vue2

    尽管我们之前已经写过有关重大变化的文章,但实际上并没有真正深入地了解我们的代码将如何变化。因此,为了显示这些更改,我们将在Vue2和Vue3中构建一个简单的表单...

    前端知否
  • JavaSript模块规范 - AMD规范与CMD规范介绍

    JavaSript模块化     在了解AMD,CMD规范前,还是需要先来简单地了解下什么是模块化,模块化开发?     模块化是指在解决某一个复杂问题或者...

    用户1174387
  • OpenCV 4.3 来了!功能增加,性能加速,例程更丰富~

    这是OpenCV每年例行发布的春季版,DNN模块依旧是开发重点,官方一直在进行深度学习推理功能的完善和例程的丰富,另外社区也贡献了不少亮点,我们一起来看看吧!

    CV君
  • C语言之常用几种排序

    1、从存放序列的数组中的第一个元素开始到最后一个元素,依次对相邻两数进行比较,若前者大后者小,则交换两数的位置;

    morixinguan
  • 5个优化混合云管理的技巧

    对于寻求业务灵活性的IT团队而言,混合云可能是一种具有吸引力但又令人生畏的云计算架构。人们需要了解5个管理混合云的最佳实践,以确保在不影响工作负载运营的情况下最...

    静一
  • 这个「多模态视频人物数据集」里,藏了杨幂、吴亦凡和鹿晗丨资源

    公开这个数据集的爱奇艺官方给它确认的类别名字叫“多模态视频人物数据集”,翻译成人话,就是有很多人,每个人用不同的“姿势”拍视频,收集起来攒成的数据集。

    量子位
  • 这个「多模态视频人物数据集」里,藏了杨幂、吴亦凡和鹿晗丨资源

    公开这个数据集的爱奇艺官方给它确认的类别名字叫“多模态视频人物数据集”,翻译成人话,就是有很多人,每个人用不同的“姿势”拍视频,收集起来攒成的数据集。

    量子位
  • Scala当中什么是Transformation和 Action,以及它们俩的区别是什么?

    一个完整的RDD任务由两部分组成:Transformation和 Action。Transformation用于对RDD的创建,还可以把老的RDD通过Trans...

    马克java社区

扫码关注云+社区

领取腾讯云代金券